AWSでプリフライトのCORSエラーがなかなか改善しなかった話

※本記事は自分の備忘録ですので細かい点はご容赦ください

目次

1. 現象
2. 課題
3. 解決策

1. 現象

AWSで簡単なアプリを制作した。
S3にindex.htmlを作成しAPI Gatewayを経由しLambdaを起動するというもの。
しかし、S3のボタンを押下してもCORSエラーがまるで解決しない。

2. 課題

CORSエラーを解決するため、ChatGPTに問い続けるもAPI 「Gateway側のCORS設定を調整する」アイデアしか出てこない。
全てChatGPTのいう改善を試みても（API GatewayのOptionsメソッドのMethod ResponseやらIntegration Responseなど）、開発者モードのエラーが出続ける。

３．解決策

改めてS3に保存したindex.htmlを確認したところ、API Gateway上の「invoke URL」と異なる値が入っていた。
どうやらテスト環境を構築しようとして新たにAPIを作成したタイミングでURLが変わっていたことに気づいていなかったようだ。
index.htmlのconst apiの値を正しいinvoke URLにしたところ解決した。

結論

ChatGPTで解決しないことで、逆に知識を溜めることが出来た。
「CORS設定で何やっても上手くいかないときは、index.htmlのconst api = (API Gatewayのinvoke URL)も確認する。」