RSS DEV コミュニティ
フォロー
CORSに打ちのめされそうになったけど、プリフライトが救ってくれた
著者は当初、フロントエンドにS3、バックエンドにApollo GraphQL、その間にAPI Gatewayを配置したフロントエンド-バックエンドシステムを構築しました。しかし、フロントエンドからのリクエストがバックエンドに到達できないという、クロスオリジンリソースシェアリング（CORS）エラーに遭遇しました。ブラウザは、信頼とセキュリティプロトコルの欠如を理由にリクエストをブロックしました。CORSはバグではなく、クロスオリジンリクエストを制限する組み込みのセキュリティ機能です。ブラウザは、実際のリクエストの前に、事前確認としてOPTIONSリクエストを送信します。サーバーまたはAPI Gatewayが事前確認中に正しく応答しない場合、ブラウザはリクエストをブロックします。解決策は、API GatewayでOPTIONSリクエストを正しく処理することでした。その後、バックエンドは環境変数を通じてフロントエンドドメインを明示的に許可しました。CORSの問題をデバッグするには、Networkタブで事前確認リクエストを確認する必要があります。事前確認の適切な処理とバックエンドドメインの許可により、CORSの問題は解決されました。
