web-dev-qa-db-ja.com

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

XMLHttpRequest cannot load http://mywebservice. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9000' is therefore not allowed access.

コード内からWebサービスを実行しようとすると、このエラーが発生します。私はそれを見つけようとし、ネット上で見つけた提案された多くの解決策を試しました。以下のコードを貼り付けます。

<form name="LoginForm" ng-controller="LoginCtrl" ng-submit="init(username,password,country)">
    <label>Country</label><input type="text" ng-model="country"/><br/><br/>
    <label>UserName</label><input type="text" ng-model="username" /></br></br>
    <label>Password</label><input type="password" ng-model="password">
    </br>
    <button type="submit" >Login</button>
</form>

また、対応するjsを形成するコントローラーは次のとおりです。

app.controller('LoginController', ['$http', '$scope', function ($scope, $http) {
    $scope.login = function (credentials) {
    $http.get('http://mywebservice').success(function ( data ) {
        alert(data);
        });
    }
}]);

Webサービスは、URLバーからアクセスすると正常に機能します。問題を解決するには？親切に助けて！

angularjsajaxcorscross-domain
69
Ru11

Chrome Webstoreには、ページに非同期呼び出しがある場合に「Access-Control-Allow-Origin」ヘッダーを追加する拡張機能がありますあなたとは異なるホストにアクセスするため。

拡張機能の名前は「Allow-Control-Allow-Origin：*」であり、これはリンクです： https：// chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi

26
Patricio Córdova

クライアント側では、AngularJSでcorsリクエストを有効にできます。

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

ただし、これでもエラーが返される場合、リクエストを行っているサーバーはCORSリクエストを許可する必要があり、そのために設定する必要があることを意味します。

18
ALi Mir

これは CORS の問題です。 angularで変更できる設定がいくつかあります。これらは通常Angular .configメソッドで設定するものです（すべてがCORSに関連しているわけではありません）。

$httpProvider.defaults.useXDomain = true;
$httpProvider.defaults.withCredentials = true;
delete $httpProvider.defaults.headers.common["X-Requested-With"];
$httpProvider.defaults.headers.common["Accept"] = "application/json";
$httpProvider.defaults.headers.common["Content-Type"] = "application/json";

また、Webサービスを設定する必要があります-この詳細は、使用しているサーバー側の言語によって異なります。ネットワーク監視ツールを使用すると、最初にOPTIONSリクエストが送信されます。サーバーは、CORS要求を許可するために適切に応答する必要があります。

ブラウザで機能するのは、クロスオリジンリクエストを作成しないためです-Angularコードはそうです。

16
Lee Willis

私は以下の解決策と私のためにその作品を持っています：

app.controller('LoginController', ['$http', '$scope', function ($scope, $http) {
$scope.login = function (credentials) {
$http({
        method: 'jsonp',
        url: 'http://mywebservice',
        params: {
            format: 'jsonp',
            callback: 'JSON_CALLBACK'
        }
    }).then(function (response) {
        alert(response.data);
    });
  }
}]);

' http：// mywebservice 'には、JSON_CALLBACKを返すcallbackパラメーターが必要ですデータ。
以下に完璧な例のサンプルがあります

$scope.url = "https://angularjs.org/greet.php";
    $http({
        method: 'jsonp',
        url: $scope.url,
        params: {
            format: 'jsonp',
            name: 'Super Hero',
            callback: 'JSON_CALLBACK'
        }
    }).then(function (response) {
        alert(response.data);
    });

出力例：

{"name":"Super Hero","salutation":"Apa khabar","greeting":"Apa khabar Super Hero!"}
4
Nadimul De Cj

これを追加しましたが、うまくいきました。

web.api

config.EnableCors();

次に、corsを使用してモデルを呼び出します。

コントローラでは、グローバルスコープの上部または各クラスに追加します。それはあなた次第です。

 [EnableCorsAttribute("http://localhost:51003/", "*", "*")]

また、このデータをAngularにプッシュする場合、.cshtmlファイルも呼び出されることを確認するか、データをプッシュしますが、ビューにデータを取り込みません。

(function () {
    "use strict";
    angular.module('common.services',
        ['ngResource'])
    .constant('appSettings',
    {
        serverPath: "http://localhost:51003/About"
    });
}());

//Replace URL with the appropriate path from production server.

これがすべての人の助けになることを願っています。EntityFrameworkを理解するのに少し時間がかかり、なぜCORSがとても便利なのかを理解しました。

2
John Aldrin

私の場合、多くのAngularコードを使用するMVCアプリ内からlocalhostのWebAPIサービスにアクセスしようとしました。私のWebAPIサービスは http：// localhost/myservice 経由でFiddlerで正常に機能しました。 IIS Express（Visual Studioの一部）の代わりにIISを使用するようにMVCアプリを構成するために少し時間がかかると、CORS関連の構成を追加せずに正常に機能しましたエリア。

1
user5373289

サーバー側の問題です。サーバー公開APIにクライアントアドレスを追加する必要があります。 Springフレームワークを使用している場合、org.springframework.web.bind.annotation.CrossOriginから@CrossOrginに注釈を付けることができます。

例：@CrossOrigin（origins = " http：// localhost：808 "）

0
user8033402

getをjsonpに置き換えます。

 $http.jsonp('http://mywebservice').success(function ( data ) {
    alert(data);
    });
}
0
Travis Heeter

わかった

「Access-Control-Allow-Origin」ヘッダーはありません

問題は私が提供していたURLにありました。ルートなしでURLを提供していました（例：https://misty-valley-1234.herokuapp.com/）。

それが機能するパス、たとえばhttps://misty-valley-1234.herokuapp.com/messagesを追加したとき。 GETリクエストではどちらの方法でも機能しましたが、POSTレスポンスでは追加されたパスでのみ機能しました。

0
Thomas David Kehoe

この拡張機能をChromeに使用します。任意のソースからajaxを使用して任意のサイトをリクエストできます。応答に「Allow-Control-Allow-Origin：*」ヘッダーを追加します

https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi/related

0
Amaru Hash