没有使用 Angular $http 设置 Content-Type 标头

Question

我正在尝试使用带有以下代码的 Angular $http 发出跨域 POST 请求。

//I've tried setting and removing these http config options
$http.defaults.useXDomain = true;
delete $http.defaults.headers.common['X-Requested-With'];
$http.defaults.headers.common['Content-Type'] = 'application/x-www-form-urlencoded';

//Basic request, with some private headers removed
return $http({
    method: 'POST',
    //withCredentials:true,
    headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'},
    params: params,
    url: url
});

预检 OPTIONS 请求收到 200 OK，但随后的 POST 收到 400 Bad Request 响应。查看 Chrome 调试窗口中的跟踪，我没有看到 POST 的 Content-Type: application/x-www-form-urlencoded; charset=UTF-8 标头。我认为这就是服务器返回错误请求响应的原因。

我正在设置一些我在上面的代码中省略的其他自定义标头，并且它们正在被发送和显示。

我还应该提到，我可以使用 Chrome 的 Advanced Rest Client 应用程序发出此请求并收到正确的响应。 （访问令牌）

我也尝试过直接执行 XMLHttpRequest()，但我得到了同样的错误。

任何关于为什么我的 Content-Type 标头没有被设置的见解？

Answer 1

如果您不发送任何数据，我不确定是否会发送 Content-Type 标头。添加一个data 对象并尝试一下：

return $http({
    method: 'POST',
    //withCredentials:true,
    headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'},
    data: data,
    url: url
});

此外，您通常使用data 而不是params 发布帖子（获取）。

如果需要，您还可以参考这个 SO 问题，其中包含有关如何转换数据的更多信息：How can I post data as form data instead of a request payload?

Answer 2

如果数据属性未定义，则不会将“Content-Type”标头添加到请求中，例如，您可以将空字符串作为数据“”发送。

 var req = {
                method: 'GET',
                url: '<your url here>',
                //headers: {
                //    'Content-Type': 'application/json;charset=utf-8'
                //},
                data: ""
            };
  $http(req);

Answer 3

我在设置标题时遇到了同样的问题。我们需要像这样在$http请求中发送数据参数

$http({
    method: 'POST',
    headers: { 'Content-Type': 'application/json},
    data: {},
    url: url
}); 

我们也可以发送空白数据。它会正常工作。

Answer 4

我的问题是我将 data 变量设置为对象而不是字符串。

return $http({
    method: 'POST',
    //withCredentials:true,
    headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'},
    data: {'key1':'value1', 'key2':'value2'},
    url: url
});

一旦我将其更改为data:'key1=value1&key2=value2'，它就可以正常工作。那里还有一个反斜杠，我必须手动输入%5c 代码。

Answer 5

比你非常“Liran B”你的修复对我来说就像一个冠军......问题困扰了我几个小时......

var req = {
                method: 'GET',
                url: '<your url here>',
                //headers: {
                //    'Content-Type': 'application/json;charset=utf-8'
                //},
                data: ""
            };

  $http(req);