CORSエラーをClaudeと解決する

ブラウザで「Access to fetch at ’…’ from origin ’…’ has been blocked by CORS policy」というエラーが出る場合、Claude Codeを活用することで迅速に対処できます。

エラーメッセージをそのままClaudeに渡す

ブラウザのDevToolsからエラーメッセージをコピーしたら、サーバーのフレームワーク名やポート番号を一緒に伝えます。具体的には、以下のような形でClaudeに質問することで的確なコード提案が得られます。

Express.js（ポート3001）とVite（ポート5173）の構成でCORSエラーが発生。
修正方法を教えてください。

※CORS: Cross-Origin Resource Sharing の略。異なるドメイン間のリクエストを制御するブラウザのセキュリティ機能。

プリフライトリクエストの問題を診断する

PUT・DELETE・カスタムヘッダーを使う場合、ブラウザは事前にOPTIONSメソッドのプリフライトリクエストを送信します。現在のCORS設定コードを見せ、該当リクエストが失敗していることを説明すると、Claudeは必要なメソッドやヘッダー設定を指摘してくれます。

設定時は「credentials: true」を使用する場合、オリジンにワイルドカードは使えず、具体的なオリジンを指定する必要があります。

本番環境への適用前にClaudeに確認する

ローカル動作確認後、本番用の設定についてもClaudeに相談します。複数オリジン許可や環境変数による動的なオリジン検証など、本番環境特有の要件を伝えるとコード提案を得られます。

※環境変数: APIキーやデータベース接続情報など、コードに直接書きたくない値をOSやサーバーに設定する仕組み。