CORS
Cross-Origin Resource Shaing
オリジン間リソース共有
HTTPヘッダーを使用して、異なるオリジンにあるリソースへのアクセス権を与えるようにブラウザに支持する仕組み
https://gyazo.com/ddd2462816298fed35e67b9eed9f4a6f
なぜ必要か
あるオリジンから読み込んだスクリプト等から、他のオリジンのリソースにアクセスできないように制限するもの
単純リクエスト
preflight リクエストがない
以下全てを満たすもののみ
GET / HEAD / POST のどれか
手動で設定できるヘッダーはAccept など一部のもののみ
Content-Typeはapplication/x-www-form-urlencoded / multipart/form-data / text/plain のみ
XMLHTTPRequestUploadにイベントリスナーが登録されていない
ReadableStreamが使われていない
preflight リクエスト
はじめにOPTIONSメソッドによるHTTPリクエストを送って安全かどうか確かめる
リクエスト例
code:_
OPTIONS /doc HTTP/1.1
Host: bar.other
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:71.0) Gecko/20100101 Firefox/71.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Connection: keep-alive
Access-Control-Request-Method: POST
Access-Control-Request-Headers: X-PINGOTHER, Content-Type
レスポンス例
code:_
HTTP/1.1 204 No Content
Date: Mon, 01 Dec 2008 01:15:39 GMT
Server: Apache/2
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
Access-Control-Max-Age: 86400
Vary: Accept-Encoding, Origin
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Access-Control-Allow-Origin, Access-Control-Allow-Methods, Access-Control-Allow-Headers等のヘッダーをもとに次のリクエストが問題なく送れるかブラウザが判断する
Access-Control-Max-Ageはpreflightリクエストの結果をキャッシュする
ただしブラウザごとに上限がある
cookieを送りたい場合、Access-Control-Allow-Credentialsヘッダーが必要