制御しているリモートサーバーから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); });
});
角度で同じ取得リクエストを試行するとき
$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 。
ヘッダーを削除して、1.0ブランチでこれを機能させるのは簡単です。次の行は、アプリの$ httpサービスによって行われたすべてのリクエスト(CORSだけでなく)からヘッダーを削除します。
yourModule
.config(function($httpProvider){
delete $httpProvider.defaults.headers.common['X-Requested-With'];
});
Update少しの警告-Angular(jQueryなど)はIE9のCORSをサポートしていません。IE10は最初の= IE CORSをサポートするブラウザ。このブログ投稿では、特定の条件下でIE8/IE9でCORSサポートを取得する方法を説明していますが、Angular $ httpサービス: http://blogs.msdn.com/b/ieinternals/archive/2010/05/13/xdomainrequest-restrictions-limitations-and-workarounds.aspx
web.config
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
</customHeaders>
</httpProtocol>
</system.webServer>
要求されたヘッダーはサーバー側で設定する必要があります。これを設定するには多くの方法があります
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.サーバーとは無関係に、初期化パラメーターとしてjerseyサーブレットに渡すことができるカスタムクラスを開発できますcom.Sun.jersey.spi.container.ContainerResponseFilters helpers.TestCorpsFilter enter code here
`public class TestCorpsFilter implements 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;
}
上記の答えは問題を解決しました。
<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;
});