web-dev-qa-db-ja.com

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

Angular 2アプリからAPIへのAPI呼び出しを行おうとすると、次のエラーが表示されます。

XMLHttpRequest cannot load http://localhost/myAPI/public/api/v1/auth/login. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 422.

私はすべての質問をウェブ上でチェックしており、CORSに関連するものは何でも、私の問題を解決するものは何もありませんでした！

ポート80で実行されているMyLaravel API（localhost）

ポート3000で実行されているMyangular 2 app（localhost：3000）

  • 私はLaravel Corsミドルウェアの側でcorsを有効にしようとしました
  • API呼び出しは、workingchrome Webセキュリティオフ。最初の答え here 解決問題、しかし、私は本当にCMDを使用するのをやめたいと思っていますchromeバージョンはアプリをテストするたびに。
  • chrome拡張機能POSTMAN APIのAPI呼び出しがAPIに対して機能しています。

だから..何が問題なの？なぜAngular 2アプリがAPIからレコードを取得できないのですか？

laravelangularcors
8
TheUnreal

OK。 Apacheを設定する必要があるようです。

私はxampp Webサーバーを使用していますが、これを解決するには here の説明に従ってhttpd.confを編集する必要がありました。

次の行を追加しました：

Header set Access-Control-Allow-Origin "http://localhost:3000"

私の問題を解決しました。

Apacheの再起動が必要です。

4
TheUnreal

chrome検査ツールを開き、Networkタブに切り替えて、Angular2が送信したリクエストを検査します。

Headers-> Response Headersで、Access-Control-Allow-Origin:*があるかどうかを確認します（そうではありません）

APIを構築している場合、最も簡単な回避策は

if (Request::is("api/*")) {
    header("Access-Control-Allow-Origin: *");
    header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Authorization, If-Modified-Since, Cache-Control, Pragma");
}

routes.phpの先頭では、ミドルウェアを使用する方が適切ですが、適切に動作し、Access-Control-Allow-Originを応答ヘッダーに追加していることを確認してください。

1
Kevin
//Add this middleware in your express app
app.use(function (req, res, next) {
res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
res.header('access-Control-Allow-Origin', '*');
next();
});
1
ASHISH RANJAN

私はLaravel Corsミドルウェアの側でcorsを有効にしようとしました

OPTIONSリクエストを処理するルートを登録しましたか？

既存のGETおよびPOSTルートにミドルウェアを単に追加し、ブラウザーがOPTIONSリクエストを行っている場合、ミドルウェアに到達することはありません。

0
Nick