在Angular2 HTTP POST中设置JSON请求标头 [英] Setting JSON request header in Angular2 HTTP POST

问题描述

我在发布请求时设置内容类型的application / json标头时遇到问题。

I'm having a problem setting a content-type of application/json header on my post request.

    saveUpdates(alltabs: AllTabs): Observable<Response> {
            let api = this.host + this.routes.save;
            let headers = new Headers();
            headers.append('Content-Type', 'application/json');

            return this._http.post(api, JSON.stringify(alltabs), { headers: headers })
            .map((response: Response) => <Response>response.json())
            .do(data => console.log("saveUpdates(): " + data))
            .catch(this.handleError);
    }

请求标题：

OPTIONS /api/productsave HTTP/1.1
Host: wbtest:92
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Access-Control-Request-Method: POST
Origin: http://localhost:3000
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.84 Safari/537.36
Access-Control-Request-Headers: content-type
Accept: */*
Referer: http://localhost:3000/product/60000010080
Accept-Encoding: gzip, deflate, sdch
Accept-Language: en-US,en;q=0.8

响应标题：

HTTP/1.1 405 Method Not Allowed
Cache-Control: no-cache
Pragma: no-cache
Allow: POST
Content-Type: application/json; charset=utf-8
Expires: -1
Server: Microsoft-IIS/7.5
X-AspNet-Version: 4.0.30319
X-Powered-By: ASP.NET
Access-Control-Allow-Origin: *
Date: Tue, 14 Jun 2016 15:16:15 GMT
Content-Length: 76

如您所见，我的请求有两个意外的标题添加了Access-Control-Request-Headers和Access-Control-Request-Method。这似乎表明CORS（跨源资源共享）存在问题。但是，API服务器上的web.conf文件一直在工作，响应头指出Access-Control-Allow-Origin：*。

As you can see, my request has two unexpected headers added "Access-Control-Request-Headers" and "Access-Control-Request-Method". This seems to suggest an issue with CORS (Cross-Origin Resource Sharing). However, the web.conf file on the API server has been working and the response headers states "Access-Control-Allow-Origin: *".

知道什么可以是错的？

Any idea what could be wrong?

更新：

上面的代码是正确的 - 问题在于Sever代码未配置为处理预检请求。就我而言，.NET Web API 2应用程序未配置为允许CORS。

The above code is correct - the problem is with the Sever code not being configured to handle preflight requests. In my case, the .NET Web API 2 application was not configured to allow CORS.

推荐答案

使用CORS，您有两种请求。事实上，CORS规范区分了两个不同的用例：

With CORS, you have two kinds of requests. As a matter of fact, the CORS specification distinguishes two distinct use cases:

• 简单请求。如果我们使用HTTP GET，HEAD和POST方法，则此用例适用。对于POST方法，仅支持具有以下值的内容类型： text / plain ， application / x-www-form-urlencoded 和 multipart / form-data 。


• 预检请求。当简单请求用例不适用时，会发出第一个请求（使用HTTP OPTIONS方法）来检查在跨域请求的上下文中可以执行的操作。

• Simple requests. This use case applies if we use HTTP GET, HEAD and POST methods. In the case of POST methods, only content types with the following values are supported: text/plain, application/x-www-form-urlencoded and multipart/form-data.
• Preflighted requests. When the "simple requests" use case doesn't apply, a first request (with the HTTP OPTIONS method) is made to check what can be done in the context of cross-domain requests.

您的服务器似乎未配置为支持预检请求。 405状态代码的原因（405方法不允许）。

It seems that your server isn't configured to support preflighted request. The reason for the 405 status code (405 Method Not Allowed).

有关详细信息，请参阅此文章：

See this article for more details:

• http：// restlet。 com / blog / 2015/12/15 / Understanding-and-using-cors /

• http://restlet.com/blog/2015/12/15/understanding-and-using-cors/

这篇关于在Angular2 HTTP POST中设置JSON请求标头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！