CORS post call在Angularjs中不起作用答案

【问题标题】：CORS post call not working in AngularjsCORS post call在Angularjs中不起作用
【发布时间】：2018-11-06 14:54:12
【问题描述】：

我正在尝试从 angularjs 应用程序实现跨域 post 调用，然后我收到以下错误。

预检响应中的 Access-Control-Allow-Headers 不允许请求标头字段授权。

但是，当我进行 Ajax 调用时，它可以正常工作。 HTTP post call 如何在 angularjs 中工作？

Ajax 调用

$.ajax({ 
            type: 'POST', 
            url: getAccessTokenUrl, 
            data: JSON.stringify(clintdata), 
            dataType: 'json', 
            contentType: "application/json; charset=utf-8", 
            success: function(resultData) { 
                console.log(resultData);    
            }, 
            error: function (request, status, error) { 
               console.log(status);  
            } 
        });

Angularjs HTTP 调用

$http({
          method: 'POST',
          url: getAccessTokenUrl,
          data: clientdata,
          headers: {
            'Authorization': undefined,
            'Auth-Token': undefined
          }
        }).then(function(res){
            console.log(res);
        }, function(err){
            console.log(err);
        });

我有一些默认设置。授权给其他人 REST

$http.defaults.headers.common['Content-Type'] = 'application/json;charset=utf-8;' ;
  $http.defaults.headers.common['Auth-Token'] = 'X-Requested-With';
  $http.defaults.headers.common['Authorization'] = $('#Authorization').val();

【问题讨论】：

您是否在后端启用了 CORS？放更多关于后端的信息。
是的，上面的ajax调用工作正常。
你使用的是什么版本的 AngularJS？
谢谢@Phil。现在它的工作。
我不明白。 it not working 和现在之间发生了什么变化？

标签： angularjs cors

【解决方案1】：

Access-Control-* 标头是响应标头。它们来自服务器以响应请求。您不会将它们应用于您的请求标头。

如果您的 jQuery 请求可以正常工作而无需添加任何额外的标头，那么您的 AngularJS 请求应该可以正常工作。

AngularJS 中的等效 jQuery 请求（包括删除您通过默认设置的 Authorization 和 Auth-Token 标头）是

$http.post(getAccessTokenUrl, clientdata, {
  headers: {
    Authorization: undefined,
    'Auth-Token': undefined
  }
}).then(response => {
  console.log(response.data)
})

或长版

$http({
  method: 'POST',
  url: getAccessTokenUrl,
  data: clientdata,
  headers: {
    Authorization: undefined,
    'Auth-Token': undefined
  }
}).then(...)

AngularJS 默认...

以application/json 内容类型发布请求
将 data 属性序列化为 JSON
需要 JSON 响应
使用response 对象解析$http 承诺，并将响应主体解析为JSON 到data 属性中

【讨论】：

我收到以下错误。 “预检响应中的 Access-Control-Allow-Headers 不允许请求标头字段 Access-Control-Allow-Origin。”
我在运行方法中有一些 http 默认设置。 $http.defaults.headers.common['Content-Type'] = 'application/json;charset=utf-8;' ; $http.defaults.headers.common['Access-Control-Allow-Origin'] = '*'; $http.defaults.headers.common['Auth-Token'] = 'X-Requested-With'; $http.defaults.headers.common['Authorization'] = $('#Authorization').val();
@AlokeKantal 我再说一遍，Access-Control-Allow-Origin 不是请求标头。不要将其添加到 $http.defaults.headers.common 或 JS 代码中的任何其他位置
如果我删除“Access-Control-Allow-Origin”表单默认设置，它会起作用吗？
我不能完全肯定地说它会工作，但你绝对不应该在请求标头中包含它

【解决方案2】：

删除以下设置

 $http.defaults.headers.common['Auth-Token'] = 'X-Requested-With';
$http.defaults.headers.common['Authorization'] = $('#Authorization').val();

从拦截器动态添加授权头

request: function(config) {
if (angular.isUndefined(config.skipInterceptor) || !config.skipInterceptor) {
// add Authorization token
}
return config;
}

这样的Http调用

$http.post('your url', {
skipInterceptor: true
})

【讨论】：