美元http.Access-Control-Allow-Origin不允许使用get，而允许使用$.ajax

Question

我有一个问题，从我控制的远程服务器获取json。我有2个web应用程序，一个提供数据并在端口3311上运行，另一个请求数据，在端口5000上运行。

使用jquery实现以下工作:

$.ajax({
  url: "http://localhost:3311/get-data",
  type: 'GET',
  dataType: 'json',
  beforeSend: function(xhr) {
    xhr.setRequestHeader("x-some-header", "some-value");
  }
})
.done(function(data) { 
    $rootScope.$apply(function() {d.resolve(data); });
})
.fail(function(data) {
    $rootScope.$apply(function() {d.reject(data); });
});

与angular

尝试相同的get请求时

$http
    .get("http://localhost:3311/get-data", { headers: {"x-some-header": "some-value"} })
    .success(function(data) { d.resolve(data);})
    .error(function(data) { d.reject(data); });

我收到错误

Origin http://localhost:5000 is not allowed by Access-Control-Allow-Origin.

控制台日志显示OPTIONS请求返回HTTP200后发生错误

OPTIONS http://localhost:3311//get-data 200 (OK) angular.min.js:99
(anonymous function) angular.min.js:99
l angular.min.js:95
m angular.min.js:94
(anonymous function) app.js:78
b.extend.each jquery-1.9.1.min.js:3
b.fn.b.each jquery-1.9.1.min.js:3
(anonymous function) app.js:76
d angular.min.js:28
instantiate angular.min.js:28
(anonymous function) angular.min.js:52
updateView angular-ui-states.js:892
e.$broadcast angular.min.js:90
transition angular-ui-states.js:324
h angular.min.js:77
(anonymous function) angular.min.js:78
e.$eval angular.min.js:88
e.$digest angular.min.js:86
e.$apply angular.min.js:88
e angular.min.js:94
o angular.min.js:98
s.onreadystatechange angular.min.js:99

和从OPTIONS请求返回的报头是

HTTP/1.1 200 OK
Cache-Control: private
Content-Type: text/plain
Server: Microsoft-IIS/8.0
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: Content-Type, Accept, X-Requested-With, x-some-header
X-AspNet-Version: 4.0.30319
X-SourceFiles: =?UTF-8?B?....
X-Powered-By: ASP.NET
Date: Tue, 21 May 2013 01:52:37 GMT
Content-Length: 0

Answer 1

这可能是由于Angular的默认行为是包含请求头'X-Requested-With'，这会导致CORS出现问题。在v1.1.1(不稳定的分支-请参阅v1.1.1的bug修复)中，通过从跨域请求中删除头来修复此问题:https://github.com/angular/angular.js/issues/1004.

很容易删除标题，并使其在1.0分支上工作。下面这行代码将从应用程序中$http服务完成的所有请求(不仅仅是CORS)中删除header:

yourModule
  .config(function($httpProvider){
    delete $httpProvider.defaults.headers.common['X-Requested-With'];
});

一个小警告——Angular(和jQuery一样)不支持IE9的CORS。IE10是第一个支持CORS的IE浏览器。这篇博文描述了在某些情况下如何在IE8/IE9中获得CORS支持，但它不能与Angular的$http服务一起工作:http://blogs.msdn.com/b/ieinternals/archive/2010/05/13/xdomainrequest-restrictions-limitations-and-workarounds.aspx

Answer 2

web。配置

<system.webServer> 
<httpProtocol>
     <customHeaders>
       <add name="Access-Control-Allow-Origin" value="*" />
     </customHeaders>
   </httpProtocol>
  </system.webServer>

Answer 3

上面的答案解决了问题。

<httpProtocol>
    <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
     </customHeaders>
</httpProtocol>

当一个HTML页面用如下服务调用angular控制器时:

$http.get(dataUrl).success(function (data) {
     $scope.data.products = data;
})
.error(function (error) {
    $scope.data.error = error;
});