在 Angular2 HTTP POST 中设置 JSON 请求标头

Posted 2023-03-04

【中文标题】在 Angular2 HTTP POST 中设置 JSON 请求标头

【英文标题】：Setting JSON request header in Angular2 HTTP POST

【发布时间】：2016-10-15 10:27:07

【问题描述】：

在我的 post 请求中设置 application/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

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

知道有什么问题吗？

更新：

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

【参考方案1】：

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

简单的请求

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

预检请求

。当“简单请求”用例不适用时，会发出第一个请求（使用 HTTP OPTIONS 方法）以检查在跨域请求的上下文中可以做什么。

您的服务器似乎未配置为支持预检请求。 405状态码的原因（405 Method Not Allowed）。

查看这篇文章了解更多详情：

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

【讨论】：

我认为您是正确的（Chrome 确实声明“预检响应具有无效的 HTTP”），但添加了“" 和 "" 到我的 web.conf 仍然会出现同样的问题。

我不知道您的服务器使用什么，但通常有一些事情要做。例如对于 Node，您需要在 Express 中定义一个中间件来处理 OPTIONS 方法。见npmjs.com/package/cors

谢谢蒂埃里。似乎我们的 .NET Web API 2 应用程序未配置为处理预检请求。