web-dev-qa-db-ja.com

Angular 2でCORS対応のHTTPリクエストを行う方法

エラーは次のとおりです。

XMLHttpRequestはロードできません http://some_url.herokuapp.com/api/some_api/ 。要求されたリソースに「Access-Control-Allow-Origin」ヘッダーがありません。したがって、オリジン ' http:// localhost:30 'はアクセスを許可されません。応答のHTTPステータスコードは503でした。

呼び出すとき

return this._http.post(requestUrl、JSON.stringify(requestBody)、requestOptions)

私は過去にAngular 1で作業しているときにCORSに問題があり、CORSがサーバー側でアクティブになったら、HTTPリクエストを変換して、特定のHTTPヘッダーを解析します

私はそれがどのように機能するかについてかなり混乱しているので、どんな説明でも大歓迎です。

15
dragonmnl

実際、Angular2の問題ではなく、サーバー側の問題です。プリフライトされたOPTIONSリクエストは、応答でAccess-Control-Allow-Originヘッダーを返す必要があります。

元のリクエストでOriginヘッダーを送信すると、サーバー側でCORSサポートが有効になります。このヘッダーは、要求のドメインが呼び出し元のドメインと異なることを検出すると、ブラウザーによって自動的に追加されます。

資格情報はこのレベルでは送信されないため、サーバー側でプリフライトOPTIONSリクエストを実装する場合は注意してください。これらは、ターゲットリクエスト内でのみ送信されます。 503エラーがあるため、問題のようです。 OPTIONSリクエストが認証されているかどうかを確認しようとしていますが、実際にはそうではありません...

詳細については、この記事を参照してください。

17