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

CORS関連、これだけ知っとけばまぁ大丈夫

More than 3 years have passed since last update.

はじめに

APIを作っているとほぼほぼCORSに関する実装を行うことになるが、登場してくるリクエストヘッダやレスポンスヘッダの名前が少々紛らわしくて覚えづらい。
そこでCORSとは何か?から始まって一連のやりとり、及び必要なリクエストヘッダ・レスポンスヘッダの名前や設定値についてメモを取ることとする。

CORS

XHRでは、異なるドメインに対してアクセスを行い、レスポンスデータを読み込むことができない(同一生成元ポリシー)。生成元はURI中のスキーム・ホスト・ポート番号の組み合わせで判断される。

http://example.comhttp://example.com:8080 は異なる生成元となる。

JSONPという手法もあるが、これはある種ハックでありセキュリティ上の問題も多い。
そこで異なる生成元にアクセスするための手法としてクロスオリジンリソース共有(CORS)という仕様が策定された(2014/1 正式にW3C勧告)。

以下、CORSの基本的なやりとりを記載する。

クライアントから Originリクエストヘッダを送る

Origin: http://www.example.com

Access-Control-Allow-Originレスポンスヘッダ

Access-Control-Allow-OriginOriginヘッダと同じ生成元を入れてレスポンスすると、ブラウザはそのレスポンスを受け入れることになる。この値に*を指定すると、どこからでも読み込めることを明示できる。

ブラウザがレスポンスを受け入れることができるということは、XHRの結果を読み込んで何らかの処理をするJavascriptのコードを書くことができるということ。

プリフライトリクエスト

生成元をまたいだリクエストを行う前に、そのリクエストが受け入れられるかどうかを事前にチェックする。以下の場合に必要になる。

  • 利用するHTTPメソッドがSimple Method(HEAD/GET/POST)以外である
  • 以下に示すヘッダ以外を送信しようとしている
    • Accept
    • Accept-Language
    • Content-Language
    • Content-Type

以下に示す以外のメディアタイプをContent-Typeに指定している。

  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain

OPTIONメソッドを使って送信される

プリフライトリクエストのレスポンス

ヘッダ 意味
Access-Control-Allow-Method 許可されるメソッドの一覧
Access-Control-Allow-Headers 許可されるヘッダの一覧
Access-Control-Max-Age プリフライト情報のキャッシュを保持して良い時間

CORSとユーザ認証情報

CORSではユーザ認証情報(Credential)を送信する際には、サーバサイドは追加のHTTPレスポンスヘッダを発行する必要がある。
CookieAuthenticationヘッダを使ってユーザ認証情報をクライアントが送ってきた場合、サーバは

Access-Control-Allow-Credentials: true

として、「認証情報を認識しています」ということをクライアントに返信する必要がある。これがなかった場合、ブラウザは受け取ったレスポンスを拒否してしまう。
また各ブラウザのXHRはクッキーなどの認証情報を送る際にはwithCredentialsプロパティをtrueにセットしなくてはならない。

参考文献

Web API The Good Parts

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
ユーザーは見つかりませんでした