Access-Control-Allow-Origin 不允许 $http.get 但 $.ajax 是 [英] $http.get is not allowed by Access-Control-Allow-Origin but $.ajax is
问题描述
我在从我控制的远程服务器获取 json 时遇到问题.我有 2 个 Web 应用程序,一个提供数据并在端口 3311 上运行,另一个请求数据在端口 5000 上运行.
I have a problem fetching json from a remote server that I control. I have 2 web applications, one serving data and running on port 3311, the other, requesting data, is running on port 5000.
使用 jquery 进行以下工作:
using jquery the following works:
$.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 请求时
when attempting the same get request with 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后发生错误
The console log shows an error occurring after the OPTIONS request returns 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 请求返回的标头是
and the headers being returned from the OPTIONS request are
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.
This is probably due to the default behavior of Angular to include the request header 'X-Requested-With'
, which can cause problems with CORS. This was fixed in v 1.1.1 (the unstable branch - see v1.1.1 bug fixes) by removing the header from cross domain requests: https://github.com/angular/angular.js/issues/1004.
很容易删除标题并使其在 1.0 分支上工作.以下行将从您应用中的 $http 服务完成的所有请求(不仅是 CORS)中删除标头:
It's easy to remove the header and get this working on the 1.0 branch. The following line will remove the header from all requests (not only CORS) done by the $http service in your app:
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
Update A little warning - Angular (like jQuery) doesn't support CORS for IE9. IE10 is the first IE browser that supports CORS. This blogpost describes how you can get CORS support in IE8/IE9 under certain conditions, but it won't work with the Angular $http service: http://blogs.msdn.com/b/ieinternals/archive/2010/05/13/xdomainrequest-restrictions-limitations-and-workarounds.aspx
这篇关于Access-Control-Allow-Origin 不允许 $http.get 但 $.ajax 是的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!