在Angular2 HTTP中设置JSON请求头

Question

在post请求中设置应用程序/json标题的内容类型存在问题。

    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

如您所见，我的请求有两个意外的标题添加了“访问控制-请求-标题”和“访问控制-请求-方法”。这似乎暗示了CORS (跨源资源共享)的问题。但是，API服务器上的web.conf文件一直在工作，响应头声明“访问-控制-允许-原产地：*”。

知道有什么不对吗？

更新：

上面的代码是正确的-问题在于Sever代码没有被配置为处理飞行前请求。在我的示例中，.NET Web 2应用程序没有配置为允许CORS。

Answer 1

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

• 简单请求。如果我们使用HTTP、HEAD和POST方法，则此用例适用。对于POST方法，只支持具有以下值的内容类型：text/plain、application/x-www-form-urlencoded和multipart/form-data。
• Preflighted 。当“简单请求”用例不适用时，将发出第一个请求(使用HTTP选项方法)，以检查在跨域请求的上下文中可以做什么。

您的服务器似乎没有配置为支持预先准备好的请求。405状态代码的原因(405方法不允许)。

有关更多详细信息，请参阅本文：

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