clientが Origin を送らないと server が Access-Control-Allow-Origin を返してくれないパターンでハマった
CORS に関わるヘッダー（クライアント側とサーバー側）
| ヘッダー | クライアント側 | サーバー側 | 説明 |
|---|---|---|---|
| Origin | 必須 | 必須 | リクエストの送信元 (スキーム、ドメイン、ポート) を示す。 |
| Access-Control-Request-Method | preflighted request の場合 | - | 許可を求める HTTP メソッド (例: GET, POST, PUT, DELETE)。 |
| Access-Control-Request-Headers | preflighted request の場合 | - | 許可を求めるカスタムヘッダー。 |
| Access-Control-Allow-Origin | - | 必須 | アクセスを許可する送信元 (Origin) を示す。* で全ての送信元を許可することも可能。 |
| Access-Control-Allow-Methods | - | preflighted request の場合 | 許可する HTTP メソッド (例: GET, POST, PUT, DELETE)。 |
| Access-Control-Allow-Headers | - | preflighted request の場合 | 許可するカスタムヘッダー。 |
| Access-Control-Allow-Credentials | - | - |
true の場合、Cookie や Authorization ヘッダーを送信可能にする。 |
| Access-Control-Expose-Headers | - | - | クライアントがアクセスできるレスポンスヘッダーを指定する。 |
| Access-Control-Max-Age | - | preflighted request の場合 | preflighted request の結果をキャッシュする時間 (秒)。 |
補足
-
preflighted request: POST メソッドで Content-Type が
application/x-www-form-urlencoded、multipart/form-data、text/plain以外の場合や、カスタムヘッダーを含むリクエストは、事前にサーバーに許可を求める preflighted request となる。 -
単純リクエスト: GET、HEAD、POST メソッドで Content-Type が
application/x-www-form-urlencoded、multipart/form-data、text/plainのいずれかで、カスタムヘッダーを含まないリクエストは、単純リクエストとなり、preflighted request は発生しない。
注意点
- CORS の設定はサーバー側で行う必要があります。
- クライアント側は、CORS に対応したブラウザを使用していれば、特別な設定は不要です。
- セキュリティ上の理由から、
Access-Control-Allow-Origin: *は本番環境では避けるべきです。
上記以外にも、CORS に関連するヘッダーは存在しますが、主要なものは上記で網羅されています。
より詳しい情報が必要な場合は、MDN のドキュメントなどを参照してください。
- MDN: Cross-Origin Resource Sharing (CORS) https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
ご不明な点があれば、お気軽にご質問ください。