制御しているリモート サーバーから json をフェッチする際に問題があります。2 つの Web アプリケーションがあり、1 つはデータを提供してポート 3311 で実行され、もう 1 つはデータを要求し、ポート 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