Angular 2 帖子：不向服务器发送“内容类型：应用程序/json”答案

【问题标题】：Angular 2 Post: Not sending 'content-type: application/json' to serverAngular 2 帖子：不向服务器发送“内容类型：应用程序/json”
【发布时间】：2017-02-01 18:29:52
【问题描述】：

我真的在 Angular 2 中处理 POST 请求。我可以发送带有某些参数的请求，但我的后端 (PHP Slim v3) 无法获取这些参数。因此，我调查了我的请求，并意识到我的 Angular 请求发送了“content-type：application/text-plain”。因此我的后端无权访问变量。

然后，我阅读了很多教程，在这里浏览堆栈溢出并得出结论，我必须附加标题。

我的 Angular 类如下所示：

/**
* Generic method for all POST-requests.
* 
* @author 
* @date 08.01.2017
*/
postData(apiUrl, data): any
{

    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });
    let body = JSON.stringify(data)

    return this.http.post(apiUrl, body, options)
        .map((responseData) => 
        {
            if(responseData.status === 200)
            {
                return this.extractData(responseData);
            }
            else
            {
                this.handleRestError(null); 
            }
        })
        .catch(res => {
            return this.handleRestError(res);
       });
}

所以总的来说很简单。但是，当我发送该请求时，奇怪的是，它以某种方式将其识别为 OPTIONS 请求并给了我“不支持的方法：OPTIONS”。

请在此处查看请求标头：

OPTIONS /auth/new HTTP/1.1
Host: localhost:8080
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Access-Control-Request-Method: POST
Origin: http://localhost:8100
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36
Access-Control-Request-Headers: content-type
Accept: */*
Referer: http://localhost:8100/
Accept-Encoding: gzip, deflate, sdch, br
Accept-Language: de-DE,de;q=0.8,en-US;q=0.6,en;q=0.4

我从后端得到的响应如下：

HTTP/1.1 200 OK
Host: localhost:8080
Connection: close
X-Powered-By: PHP/5.6.28
Set-Cookie: PHPSESSID=aa546thl9maj7hamjj64vpbe95; path=/
Expires: Thu, 19 Nov 1981 08:52:00 GMT
Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0
Pragma: no-cache
Content-type: text/plain;charset=UTF-8
Allow: POST
Access-Control-Allow-Methods: OPTIONS
Content-Length: 21

来自服务器的响应如下所示：

Allowed methods: POST

但是，我通过在发布请求中省略 options 参数，设法从服务器获得了正确的响应。然后请求被正确发送，我在 Chrome 控制台的请求有效负载中看到了所需的参数。问题是我无法访问后端的变量，因为它一直给我一个“内容类型：文本/纯文本”。

知道我做错了什么吗？

提前感谢您的帮助！

【问题讨论】：

标签： angular post content-type

【解决方案1】：

这是因为您面临 CORS 问题，因此您也需要允许使用 OPTIONS 方法（后端）。像这样：

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: Content-Type
Access-Control-Max-Age: 86400

在此处了解有关 CORS 的更多信息：https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

【讨论】：

哇，感谢您的快速帮助！！！我允许 GET 和 POST 方法，但我忘记了在 POST 请求中首先有一个 OPTIONS 请求。谢谢！！