【こーす】

CORS とは?

💡 「別のサイトからのアクセス」を許可/拒否するブラウザのルール
📌 このページのポイント
CORS:クロスオリジンリクエスト ブラウザ オリジンA サーバー オリジンB ① プリフライト(OPTIONS) このオリジンからのリクエストは許可されていますか? ② プリフライト応答 Access-Control-Allow-Origin: A ③ 本リクエスト(GET/POST等) 許可がないと、ブラウザがレスポンスをブロックする
異なるオリジン間の安全な通信を実現する仕組み
ひよこ ひよこ

CORSエラーってなんで起きるの?

ペンギン先生 ペンギン先生

ブラウザには「同一オリジンポリシー」という安全装置があって、異なるオリジン(プロトコル+ドメイン+ポート)へのリクエストをデフォルトでブロックするんだ。フロントエンドlocalhost:3000)からAPIlocalhost:8080)にアクセスすると「異なるオリジン」と判定されてCORSエラーになるよ

ひよこ ひよこ

どうやって解決するの?

ペンギン先生 ペンギン先生

API側で「Access-Control-Allow-Origin: https://your-frontend.com」ヘッダを返すようにするよ。Express.jsならcorsミドルウェアDjangoならdjango-cors-headersで設定可能。「*」(全オリジン許可)は開発環境では楽だけど、本番では特定のオリジンだけ許可するのが鉄則だね

ひよこ ひよこ

プリフライトリクエストって何?

ペンギン先生 ペンギン先生

POST(JSONボディ)やカスタムヘッダ付きリクエストの場合、ブラウザは本命のリクエストの前にOPTIONSメソッドで「このリクエスト送っていい?」と事前確認するんだ。サーバーがOKと返せば本命のリクエストが送られる。シンプルなGETリクエストではプリフライトは発生しないよ

ひよこ ひよこ

CORSはセキュリティ対策?

ペンギン先生 ペンギン先生

CORSは「ブラウザの安全装置」であって、サーバーセキュリティ対策ではないよ。curlやPostmanからはCORS制約なしにアクセスできる。CORSはクロスサイトリクエストフォージェリCSRF)の緩和策の一つであって、APIの認証・認可JWTAPIキー)は別途必要だね

ペンギン
まとめ:ざっくりこれだけ覚えればOK!
「CORS」って出てきたら「異なるドメイン間のリソース共有ルール」と思えればだいたいOK!
📖 おまけ:英語の意味
「Cross-Origin Resource Sharing」 = オリジン間リソース共有
💬 Cross-Origin(異なる出自の)Resource(リソース)Sharing(共有)だよ
← 用語集にもどる