今回やること
CORSエラーは、Consoleに長い英文で表示されます。
CORSエラーでは、Consoleの文だけでなく、Networkで実際のリクエストとレスポンスヘッダーを見ます。
Step 1: ConsoleでCORSか確認する
Consoleに次のような文が出ていたら、CORSが関係しています。
Access to fetch at 'https://api.example.com' from origin 'https://app.example.com'
has been blocked by CORS policy
ここで見るのは、2つのURLです。
- どのページから
- どのAPIへ
オリジンが違う時、ブラウザはCORSのルールを確認します。
Step 2: Networkで該当リクエストを探す
DevToolsのNetworkを開き、Fetch/XHRに絞ります。
見る項目:
- Request URL
- Request Method
- Status
- Response Headers
- Request Headers
Consoleだけでなく、Networkで該当通信がどう扱われているかを確認します。
Step 3: Originを見る
Request Headersに Origin が入っていることがあります。
Origin: https://app.example.com
これは、ブラウザが「このページからAPIへアクセスしようとしている」とサーバへ伝えるヘッダーです。
API側は、このOriginを許可するかどうか判断します。
Step 4: レスポンスヘッダーを見る
API側がCORSを許可する場合、レスポンスに次のようなヘッダーを返します。
Access-Control-Allow-Origin: https://app.example.com
認証Cookieなどを含む場合は、追加で次のような設定も関係します。
Access-Control-Allow-Credentials: true
ただし、credentials を使う場合に Access-Control-Allow-Origin: * は使えません。
Step 5: preflightを見る
POSTや独自ヘッダーを使う通信では、本番のリクエスト前に OPTIONS リクエストが送られることがあります。
これをpreflightと呼びます。
OPTIONS /api/users
POST /api/users
preflightが失敗すると、実際のPOSTが送られないことがあります。
Networkで OPTIONS が出ていないか確認します。
Step 6: よくある原因
| 症状 | よくある原因 |
|---|---|
| CORS blocked | API側でOriginを許可していない |
| preflight失敗 | OPTIONSに対応していない |
| Cookieが送られない | credentials設定不足 |
| localhostだけ失敗 | 許可Originにlocalhostがない |
| 本番だけ失敗 | ドメイン設定が古い |
フロントだけでは直せないことが多い
CORSは、基本的にAPI側が許可する仕組みです。
フロント側でURLを変えたり、modeを変えたりして無理に回避するものではありません。
必要な確認:
- API側で許可Originを設定しているか
- OPTIONSに応答しているか
- 許可methodにPOSTなどが含まれるか
- 許可headersに必要なヘッダーが含まれるか
注意: CORSを避けるために全Originを雑に許可すると、意図しないサイトからAPIを使われる可能性があります。
まとめ
CORSエラーでは、Consoleのエラー文、NetworkのRequest URL、Origin、preflight、レスポンスヘッダーを確認します。
「ブラウザが止めている」のか、「APIが落ちている」のか、「preflightで止まっている」のかを分けると、修正箇所が見えやすくなります。
