CORSとは CORS, 同一生成元ポリシー, 単純リクエスト, プリフライトリクエスト
自分用ノート。（この記事の内容をみて勉強しない方がいいです）
CORS(Cross-Origin Resource Sharing)
オリジン間リソース共有。
なぜ必要？
同一生成元ポリシーと呼ばれるwebのセキュリティ対策があるため。
具体的にはデフォルトでhttp通信においてリクエスト元とリクエスト先のオリジンが同じでない(ドメイン、ポート、プロトコル)とサーバのリソースにアクセス出来ないというもの。
実際にはスクリプトのみに適用されている。(XMLHTTPRequestなど)
これに対して異なるオリジンへのアクセスを許可する方法にCORSが存在する。
例）
https://hoge.com => https://api.hoge.com
# これはOK
http://hoge.com => https://api.fuga.com
# これはだめ
リクエストの種類
単純リクエスト(シンプルリクエスト)
抜粋
許可されているメソッドのうちの一つであること。
GET
HEAD
POST
ユーザーエージェントによって自動的に設定されたヘッダー (たとえば Connection、 User-Agent、 または Fetch 仕様書で「禁止ヘッダー名」として定義されているヘッダー) を除いて、手動で設定できるヘッダーは、 Fetch 仕様書で「CORS セーフリストリクエストヘッダー」として定義されている以下のヘッダーだけです。
Accept
Accept-Language
Content-Language
Content-Type (但し、下記の要件を満たすもの)
DPR
Downlink (en-US)
Save-Data
Viewport-Width
Width
Content-Type ヘッダーでは以下の値のみが許可されています。
application/x-www-form-urlencoded
multipart/form-data
text/plain
リクエストに使用されるどの XMLHttpRequestUpload にもイベントリスナーが登録されていないこと。これらは正しく XMLHttpRequest.upload を使用してアクセスされます。
リクエストに ReadableStream オブジェクトが使用されていないこと。
プリフライトリクエスト
本来のリクエストを送る前に送信するリクエストをプリフライトリクエストという。
具体的にはOPTIONメソッドによって他ドメインへリクエストを送り実際のリクエストを送信しても良いかを確かめている。
CORS基本的な流れ
単純リクエスト
簡単に説明すると、リクエスト側はHTTPヘッダにOriginヘッダを加える。これは送信元オリジンの情報が記述される。
レスポンス側はHTTPヘッダにAccess-Control-Allow-Originヘッダを加える。これは異なるオリジンからのリクエストを許可するリソース情報を記述する。
これら2つのオリジン情報が一致した時のみ同一生成元ポリシーを通過するような仕組みである。
- リクエスト
GET /resourcespublic-data/ HTTP/1.1
Origin: https://foo.example/
- レスポンス
HTTP/1.1 200 OK
Access-Control-Allow-Origin: *
プリフライトリクエスト
時間がある時に更新します。
参考
Discussion