API Gatewayを使ってフロントエンドから呼び出したときに、エラー「Access-Control-Allow-Origin」が発生した時の対応について解説！

検証環境

■フロントエンド
CloudFront(S3を配置)
S3(reactで作成したbuildファイルを配置)
■バックエンド
Lambda(python3.11系のpyファイルを配置)
API Gateway(作成したLambdaの呼び出し)

エラー内容

Access to XMLHttpRequest at 'https://ta8ponlqh2.execute-api.ap-northeast-1.amazonaws.com/chat' from origin 'https://d1j902qb0tpkyl.cloudfront.net' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

原因

　API GatewayのCORSで「Access-Control-Allow-Origin」を設定していなかったためでした。

対応方法

　API Gateway画面を開き、Develop > CORS > 設定を押し、設定画面に移動します。

　以下を追加して保存ボタンを押します。　※保存後はすぐに反映されているようです。

• Access-Control-Allow-OriginにCloudFrontのディストリビューションドメイン名をコピペして追加。
• Access-Control-Allow-Headersにcontent-typeを入力して追加。
• Access-Control-Allow-MethodsにPOSTを選択して追加。