Access-Control-Allow-Origin は、サーバーが返すレスポンスヘッダーで、どのオリジンにこの応答を読ませてよいかをブラウザへ伝えます。
CORS の中心となるヘッダーです。
付けるのはサーバー側
エラーメッセージがブラウザのコンソールに出るため、フロントエンド側の問題だと誤解されがちですが、設定する場所は API 側です。フロントのコードをどう書いても、このヘッダーが無ければ読めません。
* が使えない場面がある
指定できる値は2通りです。
| 値 | 意味 | 制約 |
|---|---|---|
* |
すべてのオリジンに許可 | 認証情報つきの通信では使えない |
https://example.com |
特定の1オリジンだけ | 複数指定は不可 |
Cookie や Authorization ヘッダーを伴うリクエストで * を返すと、ブラウザは応答を拒否します。この場合は具体的なオリジンを返し、あわせて Access-Control-Allow-Credentials: true が必要です。
そして2行目の制約が重要です。カンマ区切りで複数書くことはできません。 複数のオリジンを許可したいときは、リクエストの Origin ヘッダーを許可リストと照合し、一致したものだけをそのまま返す実装にします。
リクエストの Origin をそのまま返してはいけない
上の実装で手を抜き、照合せずに受け取った Origin をそのまま返すと、実質的に全オリジンを許可したことになります。しかも Allow-Credentials: true と組み合わせると、任意のサイトがログイン中の利用者の情報を読める状態になります。
「動いたから」で済ませてはいけない典型的な設定ミスです。必ず許可リストと突き合わせてください。
エラーが出たときに見る順番
- そもそもリクエストがサーバーへ届いているか（届いていなければ別の問題）
- 応答に
Access-Control-Allow-Originが付いているか - その値がブラウザの送った Origin と一致しているか
- プリフライト（
OPTIONS）に応答しているか