$ http.get不受访问控制 - 允许 - 原产地允许的，但$。阿贾克斯是 [英] $http.get is not allowed by Access-Control-Allow-Origin but $.ajax is

问题描述

我有一个问题，从我控制的远程服务器获取JSON。我有2个Web应用程序，其中一个数据端口3311，其他的，请求数据，运行在端口5000上运行。

使用jQuery了以下工作：

  $。阿贾克斯（{
  网址：HTTP：//本地主机：3311 /获取数据，
  键入：GET，
  数据类型：JSON，
  beforeSend：功能（XHR）{
    xhr.setRequestHeader（X-一些头，某些价值）;
  }
}）
.done（功能（数据）{
    $ rootScope $申请（函数（）{d.resolve（数据）;}）;
}）
.fail（功能（数据）{
    $ rootScope $申请（函数（）{d.reject（数据）;}）;
}）;
 

试图与角相同的GET请求时

  $ HTTP
    获得（HTTP：//本地主机：3311 /获取数据，{标题：{X-一些头：一些价值}}）
    .success（功能（数据）{d.resolve（数据）;}）
    .error（功能（数据）{d.reject（数据）;}）;
 

我收到错误

 产地的http：//本地主机：5000不是由访问控制 - 允许 - 产地允许的。
 

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

 选项的http：//本地主机：3311 //获取数据200（OK）angular.min.js：99

（匿名函数）angular.min.js：99

升angular.min.js：95

米angular.min.js：94

（匿名函数）app.js：78

b.extend.each的jQuery 1.9.1.min.js：3

b.fn.b.each的jQuery 1.9.1.min.js：3

（匿名函数）app.js：76

ðangular.min.js：28

实例angular.min.js：28

（匿名函数）angular.min.js：52

更新视图的角度-UI-states.js：892

即$广播angular.min.js：90

过渡角-UI-states.js：324

^ h angular.min.js：77

（匿名函数）angular.min.js：78

。E $ EVAL angular.min.js：88

即$消化angular.min.js：86

即$适用angular.min.js：88

Ëangular.min.js：94

Øangular.min.js：98

s.onreadystatechange angular.min.js：99
 

和从OPTIONS请求返回的头是

  HTTP / 1.1 200 OK
缓存控制：私人
内容类型：纯文本/
服务器：Microsoft-IIS / 8.0
访问控制 - 允许 - 产地：*
访问控制 - 允许 - 方法：GET，POST，OPTIONS
访问控制 - 允许 - 头：内容类型，接受，X-要求，通过X-一些头
的X ASPNET-版本：4.0.30319
的X的源文件：？？= UTF-8 B ....没有？
的X已启动方式：ASP.NET
日期：星期二，2013 1时52分37秒格林尼治标准​​时间5月21日
内容长度：0
 

解决方案

这可能是由于对角的默认行为，包括请求头X-要求，随着，这可能会导致问题CORS。这是固定的以V 1.1.1（不稳定分支 - 看到V1.1.1错误修正）通过从跨域请求头：<一href="https://github.com/angular/angular.js/issues/1004">https://github.com/angular/angular.js/issues/1004.

可以很容易地删除页眉和得到这个工作在1.0分支。下面的行，都将在$ http服务在您的应用程序所做的所有请求（不仅是CORS）删除标题：

yourModule   的.config（函数（$ httpProvider）{     删除$ httpProvider.defaults.headers.common ['X-要求，随着']; }）;

更新 一个小警告 - 角（如jQuery的）不支持CORS的IE9。 IE10是支持CORS的第一个IE浏览器。该博文介绍了如何可以得到CORS支持IE8 / IE9在一定条件下，但它不会与角$ http服务工作：<一href="http://blogs.msdn.com/b/ieinternals/archive/2010/05/13/xdomainrequest-restrictions-limitations-and-workarounds.aspx">http://blogs.msdn.com/b/ieinternals/archive/2010/05/13/xdomainrequest-restrictions-limitations-and-workarounds.aspx

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.

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

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

I receive the error

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

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

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

解决方案

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.

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

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

这篇关于$ http.get不受访问控制 - 允许 - 原产地允许的，但$。阿贾克斯是的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！