未添加 AngularJS Content-Type 标头答案

【问题标题】：AngularJS Content-Type header not added未添加 AngularJS Content-Type 标头
【发布时间】：2014-03-09 10:56:15
【问题描述】：

以下代码使用 CORS 协议完美地发送请求并接收响应。我想将内容类型标头更改为“application/json”而不是“application/x-www-form-urlencoded”。但是，当我用 'application/json' 替换内容类型时，请求失败。当我在浏览器中检查请求时，我可以看到内容类型标头已被删除而不是更改。

var servicesApp = angular.module('services', [])

    .config(function($httpProvider){

        /* Enable CORS */
        $httpProvider.defaults.useXDomain = true;
        delete $httpProvider.defaults.headers.common['X-Requested-With'];
})


.factory('model', function($http) {

        var testJSON = '{"employees": [ {"firstName":"John", "lastName":"Doe"} ] }';

        $http({
            url: 'http://127.0.0.1:8081/controller/UIController',
            method: "POST",
            params: {"path" : "save"},
            data: "message= " + testJSON,
            headers: {'Content-Type': 'application/x-www-form-urlencoded'}

        }).success(function (data, status, headers, config) {
            alert(data.ExampleForm[1]);

        }).error(function (data, status, headers, config) {
            alert(status);
        });

来自上述代码的请求

Request URL:http://127.0.0.1:8081/controller/UIController?path=save

Request Method:POST

Status Code:200 OK

Request Headersview source

Accept:application/json, text/plain, */*

Accept-Encoding:gzip,deflate,sdch

Accept-Language:en-GB,en-US;q=0.8,en;q=0.6

Connection:keep-alive

Content-Length:67

Content-Type:application/x-www-form-urlencoded

Host:127.0.0.1:8081

Origin:http://127.0.0.1:8020

Referer:http://127.0.0.1:8020/TwineClient/src/index.html

User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/32.0.1700.107 Safari/537.36

Query String Parametersview sourceview URL encoded

path:save

Form Dataview sourceview URL encoded

message: {"employees": [ {"firstName":"John", "lastName":"Doe"} ] }

Response Headersview source

Access-Control-Allow-Headers:Content-Type

Access-Control-Allow-Methods:POST

Access-Control-Allow-Origin:*

Content-Length:51

Content-Type:application/json;charset=ISO-8859-1

Date:Tue, 11 Feb 2014 16:15:00 GMT

Server:Apache-Coyote/1.1

当 'application/x-www-form-urlencoded' 替换为 'application/json' 时：

Request URL:http://127.0.0.1:8081/controller/UIController?path=save

Request Method:OPTIONS

Status Code:200 OK

Request Headersview source

Accept:*/*

Accept-Encoding:gzip,deflate,sdch

Accept-Language:en-GB,en-US;q=0.8,en;q=0.6

Access-Control-Request-Headers:accept, content-type

Access-Control-Request-Method:POST

Connection:keep-alive

Host:127.0.0.1:8081

Origin:http://127.0.0.1:8020

Referer:http://127.0.0.1:8020/TwineClient/src/index.html

User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/32.0.1700.107 Safari/537.36

Query String Parametersview sourceview URL encoded

path:save

Response Headersview source

Allow:GET, HEAD, POST, TRACE, OPTIONS

Content-Length:0

Date:Tue, 11 Feb 2014 16:11:02 GMT

Server:Apache-Coyote/1.1

【问题讨论】：

由于这可能是一个 CORS 请求，您能否同时发布 HTTP 请求和响应的标头和正文？
...并提及您正在使用的浏览器或浏览器
我已经为两者添加了 http 请求和响应。这些取自谷歌浏览器

标签： javascript angularjs http-headers cors

【解决方案1】：

当您将内容类型更改为 application/json 时，浏览器正在发送预检 (OPTIONS) 请求。根据 CORS 规范，这是必需的步骤。如果您想使用 application/json 作为您的请求内容类型，您的服务器将需要正确确认此预检。您可以在此处阅读有关 CORS 的更多信息：https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS。

这是关于 SO 的常见问题解答，我在这里回答了类似的问题：WebAPI 2 - CORS not working with contentType application/json。

【讨论】：