1. ホーム
  2. javascript

[解決済み] AngularJsでCORSを有効にする方法

2022-04-28 10:48:10

質問

Flickrの写真検索APIのJavaScriptを使ったデモを作りました。 今、それをAngularJsに変換しています。 インターネットで検索したところ、以下のような構成が見つかりました。

コンフィギュレーション

myApp.config(function($httpProvider) {
  $httpProvider.defaults.useXDomain = true;
  delete $httpProvider.defaults.headers.common['X-Requested-With'];
});

サービスです。

myApp.service('dataService', function($http) {
    delete $http.defaults.headers.common['X-Requested-With'];
    this.flickrPhotoSearch = function() {
        return $http({
            method: 'GET',
            url: 'http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=3f807259749363aaa29c76012fa93945&tags=india&format=json&callback=?',
            dataType: 'jsonp',
            headers: {'Authorization': 'Token token=xxxxYYYYZzzz'}
         });
     }
});

コントローラーです。

myApp.controller('flickrController', function($scope, dataService) {
        $scope.data = null;
        dataService.flickrPhotoSearch().then(function(dataResponse) {
            $scope.data = dataResponse;
            console.log($scope.data);
        });
    });

しかし、それでも同じエラーが発生しました。 以下は、私が試したリンクです。

XMLHttpRequest は URL を読み込むことができません。Access-Control-Allow-Originで許可されていないOriginです。

http://goo.gl/JuS5B1

解決方法は?

そうではありません。リクエスト先のサーバーは、あなたのウェブサイトからのJavaScriptのアクセスを許可するためにCORSを実装する必要があります。あなたのJavaScriptは、他のWebサイトにアクセスする許可を自分自身に与えることができません。