web-dev-qa-db-ja.com

AngularJS：要求されたリソースに「Access-Control-Allow-Origin」ヘッダーがありません

私は自分のwebAppを作成していて、AngularJSを使用しています。このアプリでは、script.jsというファイルを作成しました。このコードを報告します。

var modulo = angular.module('progetto', ['ngRoute']);

    // configure our routes
    modulo.config(function ($routeProvider, $httpProvider) {
        $routeProvider

            // route for the home page
            .when('/', {
                templateUrl: 'listaFilm.html',
                controller: 'listaController'
            })

            // route for the description page
            .when('/:phoneName', {
                templateUrl: 'description.html',
                controller: 'descriptionController'
            });


            $httpProvider.defaults.headers.common['Access-Control-Allow-Origin'] = '*';

    });


    modulo.controller('listaController', function ($scope, $http) {
        $http.get('https://api.getevents.co/event?&lat=41.904196&lng=12.465974').success(function (data) {
            $scope.names = data;
            }).
            error(function (data, status) {
                $scope.names = "Request failed";
            });
    });

このコードを使用して、RESTful原則に従ってAPIを呼び出します。コードを実行すると、この問題が発生します。

XMLHttpRequestをロードできません https://api.getevents.co 要求されたリソースに「Access-Control-Allow-Origin」ヘッダーがありません。したがって、Origin ' http：// localhost：838 'はアクセスを許可されていません。

Webを読んで、CORSと呼ばれる問題があることを理解しました...提案されたいくつかの解決策を試しましたが、問題を解決しませんでした。
問題を解決するにはどうすればよいですか？
修正のために追加する必要があるコードは何ですか？

javascripthtmlangularjsxmlhttprequestcors
44
Ragnarr

これはサーバー側の問題です。 corsのangularにヘッダーを追加する必要はありません。サーバー側にヘッダーを追加する必要があります。

Access-Control-Allow-Headers: Content-Type
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Origin: *

最初の2つの答え： AngularJsでCORSを有効にする方法

57
CapK

CORSはクロスオリジンリソース共有です。あるドメインから別のドメインにアクセスしようとすると、このエラーが発生します。

JSONPを使用してみてください。あなたの場合、JSONPはGETメソッドのみを使用するため、正常に動作するはずです。

次のようなものを試してください：

var url = "https://api.getevents.co/event?&lat=41.904196&lng=12.465974";
$http({
    method: 'JSONP',
    url: url
}).
success(function(status) {
    //your code when success
}).
error(function(status) {
    //your code when fails
});
30
Ritesh