JavaScript

JavaScriptでよくあるCORSエラーとは？原因と確認ポイントを解説

JavaScriptから外部APIを呼び出す際に発生するCORSエラーについて、同一オリジンポリシーとの関係、エラーの見方、確認すべき設定を整理します。

この記事でわかること

  • CORSは、ブラウザから異なるオリジンへアクセスする際の制御に関係する仕組みです。
  • エラー解決では、フロントエンドだけでなくAPIサーバーのレスポンスヘッダーも確認します。
  • ブラウザの開発者ツールを使うと、リクエストやレスポンスの状況を切り分けやすくなります。

CORSエラーとは何か

CORSは、Cross-Origin Resource Sharingの略で、異なるオリジンにあるリソースをブラウザ上のJavaScriptから利用できるかどうかに関係する仕組みです。ブラウザはセキュリティ上の理由から、スクリプトによるオリジン間通信をそのまま許可していません。APIサーバーのレスポンスに含まれるCORS関連ヘッダーを確認し、条件を満たす場合にレスポンスをJavaScriptへ渡します。

オリジンは、スキーム、ホスト、ポートの組み合わせです。例えば、https://app.example.comとhttps://api.example.comはホストが異なるため別オリジンです。また、http://example.comとhttps://example.comもスキームが異なります。重要なのは、APIへリクエストが届くかだけでなく、ブラウザがそのレスポンスをスクリプトから利用できる状態にするかという点です。

CORSエラーが発生する流れを図で理解する

CORSでは、APIサーバーが通信そのものを必ず拒否するとは限りません。ブラウザがレスポンスヘッダーを検査し、要求元のオリジンに対する許可が確認できない場合、JavaScriptからレスポンスを利用できない状態にします。

通常の通信失敗では、DNSエラー、接続失敗、HTTPステータスなどが主な確認対象になります。一方、CORSエラーでは、通信の結果がブラウザに届いていても、レスポンスをJavaScriptが読めない場合があります。また、401や403などの認証・認可エラーとCORS設定の不備が同時に見えることもあるため、Networkで実際のレスポンスを確認します。

まず確認したいCORSエラーの原因

  • レスポンスヘッダーの確認：要求元に対するAccess-Control-Allow-Originが含まれているか、値が実際のOriginと一致しているかを確認します。
  • プリフライトの確認：HTTPメソッドや独自のリクエストヘッダーなどによって、実際のリクエスト前にOPTIONSリクエストが送られる場合があります。Access-Control-Allow-MethodsやAccess-Control-Allow-Headersも確認対象です。
  • 認証情報の確認：Cookieなどを伴う通信では、クライアント側の認証情報設定と、Access-Control-Allow-Credentialsなどのレスポンス設定を整合させます。認証情報付き通信でAccess-Control-Allow-Origin: *を使えるとは限りません。
  • 環境差の確認：開発環境と本番環境で、フロントエンドとAPIのオリジン、許可リスト、プロキシ設定が異なっていないかを確認します。
  • URLやサーバー状態の確認：APIのURL間違い、リダイレクト、サーバー側の例外によるエラーレスポンスも候補に含めます。

ブラウザの開発者ツールで確認する手順

  1. エラーを再現し、開発者ツールのConsoleとNetworkを開きます。
  2. Networkで対象APIと、前段にOPTIONSリクエストがないかを探します。
  3. Request URL、Request Method、Origin、Statusを確認します。
  4. Response HeadersでAccess-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headersなどを確認します。
  5. 要求元のオリジンとサーバー側の許可設定を照合し、API担当やインフラ担当と設定を確認します。

Consoleのメッセージは原因の手がかりになりますが、メッセージだけで一律に判断しないことが大切です。リクエストが送信されたか、プリフライトが成功したか、レスポンスに必要なヘッダーがあるかを順番に切り分けます。

安全に解決するための実装・運用上の注意点

基本方針は、APIサーバー側で要件に合ったオリジンだけを許可することです。すべてのオリジンを無条件に許可する設定は、公開データか、Cookieなどの認証情報を扱うAPIかを確認したうえで慎重に判断します。

開発時にプロキシやバックエンド経由の構成を使う方法もあります。ただし、ブラウザから見える通信先と、プロキシやバックエンドが実際に接続するAPIの違いを理解しておく必要があります。ブラウザ拡張機能や設定変更でエラーを見えなくする方法は、利用者環境での恒久的な解決策とは分けて扱いましょう。

参考