Help us understand the problem. What is going on with this article?

ChromeでCORSエラー発生時の対処法

はじめに

Chrome経由で自作APIを使用した際に、
CORSエラーが発生しました。
下記にその対処方法を記載します。

CORS(Cross-origin resource sharing: クロスオリジンリソース共有)

詳しくはオリジン間リソース共有 (CORS) - HTTP | MDN参照。

とてもざっくり表現すると、
許可に応じたHTTPリクエストを行い、安全でないHTTPリクエストを制限する仕組み。
クロスサイトリクエストフォージェリ対策等として用いられる。

プリフライトリクエストと呼ばれる事前リクエストを送り、
そのレスポンスに応じてリクエストを送る/中止する

Chrome経由のリクエスト

CORSに則り、以下の流れで
CheromeはHTTPリクエストを送る。
例)POSTリクエスト時
①プリフライトリクエスト(OPTIONS)
 ↓ 結果がOKなら
②実際のリクエスト(POST)

対処方法

HTTPリクエスト送信時

プリフライトリクエストのレスポンスには、以下の情報が含まれている必要がある。
Access-Control-Allow-Origin:リクエスト送信側(Chrome)のオリジン
• Access-Control-Allow-Headers:実際のリクエストで送信したいHTTPヘッダ

上記が含まれていない場合、プリフライトリクエストはエラーとなり、
実際のリクエストは送られない

HTTPレスポンス受取時

実際のリクエストに対するレスポンスにも、以下が設定されている必要がある。
Access-Control-Allow-Origin:リクエスト送信側(Chrome)のオリジン

設定されていない場合、エラーとなり、
レスポンスを完全に受け取ることができない

まとめ

Chrome経由でHTTPリクエストを送る時は、
プリフライトリクエストのレスポンスにオリジンとヘッダの指定情報を含めるよう、
ターゲット側でCORS定義を設定
しましょう。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした