angularjs - angular.js クロム Access-Control-Allow-Origin

Question

Angular.js サービスを使用して、Jersey/Spring で作成した REST サービスから JSON を取得しようとしています。

Firefox を使用している場合は正常に動作しますが、Chrome に移動すると次のメッセージが表示されます。

XMLHttpRequest cannot load http://localhost:8080/VirtualLawyerPj/services/timeoftheday/asjson/tue. Origin http://localhost:8090 is not allowed by Access-Control-Allow-Origin.

これが私のサービスコードです：

angular.module('myAppServices', ['ngResource']).
factory('Time', function($resource){
    return $resource('http://localhost:port/VirtualLawyerPj/services/timeoftheday/asjson/tue',{port:":8080"}, {
        query: {method:'GET', params:{}, isArray:false}
    });
});

誰かが同じ問題を抱えていましたか？どうやってこれを機能させましたか？

ありがとう。

score 2 · Accepted Answer

CORS ソリューションは、html5rocksチュートリアルで説明されています。私のために働いた。

score 2 · Accepted Answer

ポート 80 で実行されている Apache サーバーと、同じサーバーであるポート 8889 で REST Web サービスを実行しています。私はこの解決策を試しましたが、うまくいきませんでした:

    myApp.config(['$httpProvider', function($httpProvider) {
        $httpProvider.defaults.useXDomain = true;
        $httpProvider.defaults.headers.common['X-Requested-With']; を削除します。
    }]);

これを機能させるために私が見つけた唯一の方法は次のとおりです。

services.js ファイル:

angular.module('mirthServices', ['ngResource'])。
    factory('Cs', function ($resource) {
        return $resource('http://localhost/rest/cs/id/:csId');
    });

Apache の proxy.conf ファイル:

ProxyPass /rest http:// localhost:8889/REST
ProxyPassReverse /rest http:// localhost:8889/REST

score 2 · Accepted Answer

私はまだ Angular を学んでいますが、$location サービスを使用して現在の URL ホストとポートを取得すると、環境間でコードを移動するときに簡単になります。ちなみに、これはあなたが説明した問題を克服するのにも役立ちました。

angular.module('myAppServices', ['ngResource']).
factory('Time', ['$location', function($location) {
  var url = 'http://:host::port/VirtualLawyerPj/services/timeoftheday/asjson/tue';
  var params = {
    host: $location.host(),
    port: $location.port()
  };
  var actions = {
    query: {method:'GET', isArray:false}
  };
  return $resource(url, params, actions);
}])

score 0 · Accepted Answer

ファイル httpd.conf の Apache を変更することで、この問題を解決しました。

....
<Directory>
    .....
    Header set Access-Control-Allow-Origin "*"
</Directory>

行ヘッダーセットを追加しました。これが誰かの助けになることを願っています

angularjs - angular.js クロム Access-Control-Allow-Origin

4 に答える 4

Related

Reference