CORSエラー（Cross-Origin Resource Sharing Error）とは？「Access-Control-Allow-Origin」「プリ フライト リクエスト」

CORSエラーとは

CORSは「異なるオリジン（ドメイン、プロトコル、ポート）間でのリソース共有」を制御するセキュリティの仕組みです。

そのため異なるオリジン間でリソースをリクエストしようとする際にブラウザが制限をかけることにより、CORSエラーが発生します。

「Access-Control-Allow-Origin」の設定

異なるオリジン間のリクエストで制限をうけずにアクセスするためには、レスポンスヘッダーに「Access-Control-Allow-Origin」を指定することで可能になります。

https://zenn.dev/syo_yamamoto/articles/445ce152f05b02

プリフライトリクエストとは

異なるオリジン（ドメイン）へリクエストを送る前の「事前確認」

• 本来のリクエストを送る前に、そのリクエストが安全かどうかを確認します
• HTTPのOPTIONSメソッドを使用して送信されます

プリフライトリクエストはブラウザが自動的に行います。開発者が明示的にコードを書く必要はありません。

プリフライトが必要になるケース

• 特殊なヘッダーを使用する場合
• application/jsonなどの特殊なContent-Typeを使用する場合
• GET/POST/HEAD以外のメソッド（PUT、DELETEなど）を使用する場合

プリフライトリクエストの流れ

ブラウザがOPTIONSリクエストを送信 サーバーがCORS設定を返答 許可された場合のみ、本来のリクエストを送信

開発者ツールでの確認方法

1. ブラウザの開発者ツールを開く
2. Networkタブで確認
   • OPTIONSメソッドのリクエスト → これがプリフライトリクエスト
   • その直後の本来のリクエスト

リクエストヘッダー:

• Origin: [送信元のドメイン]
• Access-Control-Request-Method: [使用予定のメソッド]
• Access-Control-Request-Headers: [使用予定のヘッダー]

レスポンスヘッダー:

• Access-Control-Allow-Origin: [許可されているドメイン]
• Access-Control-Allow-Methods: [許可されているメソッド]
• Access-Control-Allow-Headers: [許可されているヘッダー]

ローカルのNext.jsのプロジェクトからさくらインターネットのレンタルサーバーのphpのAPIにアクセスする場合