CORSエラー解消ヘッダー生成器｜Nginx/Apache/Express対応の設定コードを即時生成

Web API開発で頻繁に遭遇するCORS (Cross-Origin Resource Sharing) エラーを解決するための、サーバー設定コードをオンラインで生成するツールです。許可するドメインやHTTPメソッドを選択するだけで、Nginx, Apache, Express (Node.js), Goなど主要な環境に対応した設定スニペットを即座に入手できます。

💡 ツール概要

このツールは、フロントエンドとバックエンドを分離した開発で必須となるCORS設定を、ミスなく迅速に行うために役立ちます。

• 主要なサーバー環境に対応 Nginx (.conf), Apache (.htaccess), Express (Node.js middleware), Go (net/http middleware) の4種類の設定コードを生成できます。
• 詳細なポリシー設定 Access-Control-Allow-Origin (許可ドメイン), Access-Control-Allow-Methods (許可HTTPメソッド), Access-Control-Allow-Headers (許可カスタムヘッダー) を直感的に設定できます。
• 認証情報 (Credentials) 対応 CookieやAuthorizationヘッダーの送信を伴うリクエストに必要な Access-Control-Allow-Credentials の設定もワンクリックで切り替え可能です。Originが * の場合はCredentialsを許可できないというCORSの仕様も自動的に考慮されます。
• リアルタイム生成 入力フォームの値を変更すると、即座に出力コードが更新されるため、試行錯誤しながら最適な設定を見つけられます。

🧐 よくある質問

Q. Originに * を指定しているのにCookieが送受信できません。

A. CORSの仕様上、Access-Control-Allow-Origin にワイルドカード (*) を指定した場合、セキュリティ上の理由から Access-Control-Allow-Credentials を true に設定することはできません。Cookieや認証ヘッダーを扱うAPIの場合は、https://example.com のように、リクエストを許可するドメインを明示的に指定する必要があります。

Q. プリフライトリクエスト (preflight request) とは何ですか？

A. GET や HEAD、一部の POST 以外のメソッド（PUT, DELETEなど）や、Content-Type: application/json のようなカスタムヘッダーを含むリクエストを送信する前に、ブラウザがサーバーに対して「この種類のリクエストを送信しても安全か？」を問い合わせるために自動的に送信する OPTIONS メソッドのリクエストです。サーバー側でこのプリフライトリクエストに対して適切なCORSヘッダーを返さないと、ブラウザは本体のリクエストを送信せず、CORSエラーとなります。

📚 CORSヘッダーの豆知識

CORSエラーのデバッグは、まずブラウザの開発者ツールの「ネットワーク」タブを開くことから始まります。エラーが発生しているリクエストを選択し、「ヘッダー」タブでレスポンスヘッダーに意図した Access-Control-Allow-* ヘッダーが含まれているかを確認するのが基本です。特に、プリフライトリクエスト (OPTIONS) が 2xx のステータスで正常に返ってきているかは重要なチェックポイントです。

また、CDNやプロキシを介している環境では Vary: Origin ヘッダーの追加を検討すると良いでしょう。これは、同じURLへのリクエストであっても、リクエスト元のOriginによってレスポンス（特にCORS関連ヘッダー）が異なることをキャッシュサーバーに伝えるためのヘッダーです。これがないと、あるドメイン向けに許可されたレスポンスがキャッシュされ、別のドメインからのリクエスト時にそのキャッシュが返されてしまい、CORSエラーを引き起こす可能性があります。