どういうケースで使うのか?
フロントエンドから呼び出されるAPIを作る時に、レスポンスヘッダーに追加する。
Reactなどのブラウザ上のスクリプトから、別のオリジン(httpsスキーム + ドメイン + ポート)のAPIへアクセスすることは、ブラウザが禁止している。
レスポンスヘッダーに Access-Control-Allow-Origin
を指定することで、アクセスが可能になる。
指定する値の種類
アクセスを許可するオリジンを、https://example.com
のみに指定。
Access-Control-Allow-Origin: https://example.com
どのオリジンからも叩けるように指定する(オープンなAPI等)
'Access-Control-Allow-Origin': '*',
気をつけるべきポイント
別のオリジンからのアクセスを禁止しているのはブラウザなので、ターミナルなどからのアクセスは、Access-Control-Allow-Origin
では制限できない。
例えば、curl で叩かれるとアクセスできてしまう。
curl your-api.com
ブラウザはリクエストヘッダーのOrigin
の値と、レスポンスヘッダーのAccess-Control-Allow-Origin
の値でアクセスの許可を判定しています。
参考