Access-Control-Allow-Origin不允许$ http.get，但$ .ajax是

从我控制的远程服务器获取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度相同的获取请求

 $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问题。 这在v 1.1.1（不稳定的分支 – 见v1.1.1错误修复 ）中通过从跨域请求中删除头来修复 ： https ： //github.com/angular/angular.js/issues/1004 。

很容易删除标题，并在1.0分支上得到这个工作。 下面这一行将删除应用程序中的$ http服务完成的所有请求（不仅是CORS）的标题：

 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的限制-局限性和- workarounds.aspx

Answer 2

web.config中

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

Answer 4

请求的头文件必须在服务器端设置。 设置这个有很多方法

1.可以

  <filter> <filter-name>ResponseFilter</filter-name> <filter-class>org.apache.catalina.filters.CorsFilter</filter-class> </filter> <filter-mapping> <filter-name>ResponseFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> 

2.独立的服务器，你可以开发一个自定义的类，可以作为初始parameter passing给泽西州的servlet com.sun.jersey.spi.container.ContainerResponseFilters helpers.TestCorpsFilter enter code here公共类TestCorpsFilter实现ContainerResponseFilter {

  @Override public ContainerResponse filter(ContainerRequest arg0, ContainerResponse arg1) { ResponseBuilder resp = Response.fromResponse(arg1.getResponse()); resp.header("Access-Control-Allow-Origin", "*").header("Access-Control-Allow-Methods", "GET, POST, OPTIONS"); String requestHeader = arg0.getHeaderValue("Access-Control-Request-Headers"); if (requestHeader != null && !requestHeader.equals("")) { resp.header("Access-Control-Allow-Headers", requestHeader); } arg1.setResponse(resp.build()); return arg1; }