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

通过Angular $ http调用的

CORS请求触发了preflight（OPTIONS动词），但使用普通Ajax调用或jQuery Ajax，其发送为未预检的CORS请求，已通过Chrome调试器网络标签确认。

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

解决方案：，通过引用 Access-Control-Request-Headers

删除Angular添加的标题。

  没有任何GET的

headers请求被视为简单请求

如果您已配置 Angular $ http默认值，它将在请求中添加这些标头，这使其不是那么简单 CORS，如下图所示。

  

预检后，所有自定义HTTP标头均以Access-Control-Request-Headers的形式发送。一旦服务器允许按照CORS规则进行通信，浏览器就会发送实际请求（带有原始方法和标头等）

//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
});