CORSとプリフライトリクエストについて

1. はじめに

CORS（Cross-Origin Resource Sharing）は、Webアプリケーション開発において重要な仕組みであり、CORSエラーを経験したことがある方も多いかと思いますが、そもそもCORSとは何なのか、その仕組みとエラーの解決方法について、業務でエラーになってしまったため記録として記事を残します。

2. オリジンとは？

CORSを理解するためには、まず「オリジン」の概念が重要です。オリジンは、URLのスキーム（http/https）、ドメイン、ポート番号の組み合わせで構成されます。例えば、以下の2つのURLは異なるオリジンとみなされます

• https://example.com
• http://example.com:8080

ブラウザは、異なるオリジン間でリソースのやり取りをデフォルトで許可していません。これをセキュリティの観点から制御するために導入されたのがCORSです。

3. CORSの基本的な仕組み

CORSは、あるオリジンのウェブページが別のオリジンのリソースにアクセスする際、サーバー側がそのリクエストを許可するかどうかを制御する仕組みです。

例えば、https://siteA.comからhttps://siteB.comのAPIにデータをリクエストする場合、siteB.comのサーバーがCORSヘッダーで許可を行います。

代表的なCORSヘッダー

• Access-Control-Allow-Origin: どのオリジンがリクエストを許可されているか（例: https://example.comまたは*）。
• Access-Control-Allow-Methods: 許可されたHTTPメソッド（例: GET, POST, PUT）。
• Access-Control-Allow-Headers: 許可されたカスタムヘッダー（例: Authorization, Content-Type）。
• Access-Control-Allow-Credentials: クッキーなどの認証情報を許可するか（例: true）。

4. プリフライトリクエストとは？

特定の状況下で、ブラウザはプリフライトリクエストというものをサーバーに送信します。これは、実際のリクエストを送る前に、そのリクエストが許可されているかどうかを確認するためのものです。OPTIONSメソッドを使用して、サーバーにアクセス可能かを問い合わせます。

プリフライトリクエストが必要になる条件：

• HTTPメソッドが GET や POST 以外の場合（例: PUT, DELETE）。
• カスタムヘッダーを使用している場合。

5. CORSエラーの原因と解決策

CORSエラーは、サーバーが適切にCORSヘッダーを返さなかったり、ブラウザが期待する設定がなされていない場合に発生します。以下は、よくあるCORSエラーの原因と解決策です。

よくあるCORSエラー

• Access-Control-Allow-Originが設定されていない: サーバーがリクエスト元のオリジンを許可していない場合。
• プリフライトリクエストが拒否される: OPTIONSリクエストに対して適切なヘッダーを返さない場合。
• 認証情報が送れない: Access-Control-Allow-Credentialsがtrueに設定されていない場合、クッキーなどの認証情報は送信できません。

解決策

• サーバー側でAccess-Control-Allow-Originを設定し、必要なオリジンを許可する。
• 使用するメソッドやヘッダーをサーバーで明示的に許可する。
• 認証情報を含める場合は、Access-Control-Allow-Credentials: trueを追加し、オリジンを*ではなく特定のオリジンに設定する。

6. まとめ

CORSは、Webセキュリティを確保するための重要な仕組みですが、正しく設定されていないと開発中にエラーを引き起こす可能性があります。

サーバー側で適切にCORSヘッダーを設定し、リクエストの内容に応じた処理を行うことが、エラーを回避するための鍵です。

7. 参考