在 Angular 2 中获得带有 400 错误请求的 JSON 响应答案

【问题标题】：Getting JSON response with 400 bad request in Angular 2在 Angular 2 中获得带有 400 错误请求的 JSON 响应
【发布时间】：2017-09-10 15:48:54
【问题描述】：

我正在尝试从 Angular 2 调用 Magento 2 的 REST API。

长期面临这个问题，并且真的需要针对问题所在的相同或至少建议进行修复？

下面是我如何从 Angular 调用 REST：

@Injectable()
export class ProductService {
public _productUrl = 'http://10..../Mage_ang2/index.php/rest/V1/customers/1';

constructor(private _http: Http) { }

getProducts(): Observable<IProduct[]> {
let headers = new Headers({ 'Content-Type': 'application/json; charset=utf-8' });
headers.append('Authorization', 'Bearer ntthnrbj1uam2tuv1ekva7n8jh18mcnkby3');
let options = new RequestOptions( {method: RequestMethod.Get, headers: headers });


console.log(headers);
    return this._http.get(this._productUrl,options)
        .map((response: Response) => <IProduct[]> response.json())
        .do(data => console.log('All: ' +  JSON.stringify(data)))
        .catch(this.handleError);
}

当我在 Postman 中发布相同内容时，我会收到回复。

当我使用相同的标头运行 Angular2 时，我得到一个 JSON 响应但带有 400（错误请求）！

响应也不是来自实际的请求调用。

【问题讨论】：

浏览器中的控制台是什么意思？？
我附上了浏览器控制台的截图，上面写着 400 但我得到了一个 json 数据
已更新我在浏览器控制台@Aravind 中遇到的错误...已对此重新获取和 CORS 问题进行了足够的搜索，需要帮助确定问题出在哪里？
有什么建议@aravind？
不。没有足够的信息。似乎是服务器端问题。

标签： angular magento angular-routing angular-services

【解决方案1】：

试试

const headers = new Headers({ 'Content-Type': 'application/json', 'Authorization': 'Bearer ntthnrbj1uam2tuv1ekva7n8jh18mcnkby3' });    

let options = new RequestOptions({ headers: headers });

return this._http.get(this._productUrl,options)

【讨论】：

虽然此代码可能会回答问题，但提供有关它如何和/或为什么解决问题的额外上下文将提高答案的长期价值。

【解决方案2】：

我在示例应用程序中一直使用相同的语法，但没有授权标头。一切似乎都是正确的。

问题可能与设置授权标头有关。检查授权令牌是否正确。

试试这个语法来设置标题

let headers = new Headers({ 'Content-Type': 'application/json; charset=utf-8';Authorization: **token** });

【讨论】：

【解决方案3】：

试试这个，应该可以的

 let headers = new Headers({
        'Content-Type': 'application/json',
        'Authorization':'Bearer ntthnrbj1uam2tuv1ekva7n8jh18mcnkby3'
    });

 return this._http.get(url,{headers:headers})
        .map(response: any => {
            return response.json();
        });

【讨论】：

你能告诉我你的代码和我的代码有什么变化吗！！你在哪里使用get()？？
@Sach 对，有get()。您可以通过比较请求标头来查看差异。我没试过
@Sach 可以对比一下postman和angular的请求头吗？
完全相同的标头，使用相同的内容类型和 Auth Bearer 键值..!!