javascript - AngularJS CORS http 调用不起作用，但普通 Ajax 和 jQuery 工作正常

Question

我有一个简单的跨域服务，旨在处理 Simple CORS reques t。我可以通过普通的 xmlHTTP 调用或 jQuery($.ajax) 来调用它，但它会用 AngularJS $http 抛出 Access-Control-Allow-Origin 错误

var url = 'http://some-cross-domain-url/some-path';

$http.get(url); //preflight OPTION verb issued by browser and 
//since server is not expecting it, it failed

$.ajax(url, {type: 'GET'}); //working fine as no preflight request sent

Answer 1

CORS通过 Angular $http 调用的请求正在触发 preflight (OPTIONS 动词)但使用普通 Ajax 调用或 jQuery Ajax，它作为非预检 CORS 请求发送，由 chrome 中的调试器网络选项卡确认。

作为旨在处理简单 CORS 请求调用的服务，我们需要确保 Angular 也以某种方式准备请求，以便浏览器发出简单的 CORS 请求(参见 Simple 与 MDN 上的不那么简单的 CORS 请求)。

解决方案:通过引用Access-Control-Request-Headers删除Angular添加的 header

GET request without any headers is treated as simple request

如果您配置了 Angular $http 默认值，它会将这些 header 添加到请求中，这使得 CORS 不那么简单，如下图所示。

All custom HTTP headers sent as Access-Control-Request-Headers when preflighted. Once server allows the communication as per CORS rule, browser sends the actual request(with original Method and Headers etc)

//remove custom headers by looking at Access-Control-Request-Headers
var headers = {
  'Authorization': undefined,//undefined tells angular to not to add this header
  'pragma': undefined,
  'cache-control': undefined,
  'if-modified-since': undefined
};
$http.get(url, {
  headers: headers
});