我从我控制的远程服务器获取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
这可能是由于Angular包含请求标头的默认行为所致'X-Requested-With',这可能导致CORS问题。在v 1.1.1(不稳定分支- 参见v1.1.1错误修复)中已通过从跨域请求中删除标头来修复此问题:https : //github.com/angular/angular.js/issues/1004。
'X-Requested-With'
删除标头并使其在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- restrictions-limitations-and- workarounds.aspx