デプロイでハマった話① CORSの二重ヘッダーとAIの暴走 | システム開発はAIに任せよう！
AWSにデプロイして、ブラウザを開いて、さあ動くぞ——と思ったら「Failed to fetch」。
コンソールを開くと、CORSエラー。
「あー、またCORSか」と思いながら直す。直したら今度は別のCORSエラー。直したらまた別の。気づいたら半日が溶けていた。
AIを使って作ったWebツールをAWSの本番環境（Lambda + CloudFront）にデプロイしたときの話です。
CORSって何がそんなに難しいのか
CORSとは Cross-Origin Resource Sharing の略で、異なるドメイン間でのAPI通信を制御する仕組みです。ブラウザが「このサイトがあのAPIを呼んでいいか」をチェックする機能と言えばイメージしやすいでしょうか。
難しいのは、設定する場所が複数あることです。今回の構成で言えば、
- Lambda関数URL側のCORS設定
- Lambdaのコード内に書いたCORSヘッダー
この2箇所があって、両方で「許可するオリジン」を設定できてしまう。
問題は、両方を同時に有効にすると二重ヘッダーが生まれるということです。
3段階で詰まった話
最初のエラーは分かりやすかった。CloudFrontのURLをLambdaのCORS設定に追加していなかっただけ。追加して解決——と思ったら、また「Failed to fetch」。
コンソールを見ると今度はこう表示されていた。
Access-Control-Allow-Origin header contains multiple values '*, https://xxxxxxx.cloudfront.net'
つまりヘッダーに「*（全部許可）」と「CloudFrontのURL」の両方が入っていた。Lambda関数URLのCORS設定が自動でヘッダーを付与し、さらにコード側も手動でヘッダーを付与していたので、二重になっていたわけです。
じゃあコード側の`*`をCloudFrontのURLに書き換えればいい——と修正してデプロイ。また「Failed to fetch」。
今度のエラーはこう。
'https://xxxxxxx.cloudfront.net, https://xxxxxxx.cloudfront.net'
同じURLが2個並んでいる。笑えない。
Lambda関数URLのCORS設定とコード側のCORSヘッダーが、値は同じでも両方動いていたため、やはり二重になっていた。
解決策はLambda関数URLのCORS設定をオフにして、コード側のみで制御すること。どちらか一方に一本化すれば二重にならない。これだけのことに、3段階・半日かかりました。
「OFFにするには？」の一言がデプロイを崩壊させた
同じ時期に、別に作っていたWebサービスでも似たような騒動がありました。
管理画面でサービスをONにできるのは分かっていた。OFFにする手順が分からなかったので、AIに一言聞いた。「管理画面でONできるけど、OFFにするにはどうしたらいいの？」
この一言に対してAIがやったことのリストがこれです。
- ログイン画面に「クイックトグル」ボタンを追加（提案なし・勝手に実装）
- QUICK_PASSWORD環境変数をLambdaに追加（認めていない）
- Lambda本体を書き換えてデプロイ → CORSエラー発生
- API Gatewayのルートを手動CLIで追加 → CORSエラーをさらに悪化
- admin.htmlをさらに複雑化（5画面構成に）
- 「シンプルにしろ」と言ったらメール認証ごと削除
「OFFにするには？」という質問への本来の回答は、「admin.htmlにログイン後、停止ボタンを押せばOFFになります」の一言で終わるはずでした。
AIが勝手に実装→デプロイを繰り返したことで、CORSが崩壊しただけでなく、設計までいつのまにか変わっていた。「これがAIの暴走ってやつか」と思いました。
AIは便利ですが、「提案→確認→実行」の手順を守らせることは、使う側の責任でもあると気づいた出来事でした。
CORSは一箇所で管理する
今回の教訓をまとめると、シンプルです。
Lambda + CloudFront構成でCORSが設定できる場所は複数あります。Lambda関数URLのCORS設定、コード内のCORSヘッダー、API Gatewayのレスポンスヘッダーなど。これをどこか一箇所だけで制御すると決めておくことが、二重ヘッダー問題を防ぐ一番シンプルな答えです。
私の場合はLambdaのコード側に一本化しました。管理が一箇所になるので、変更するときも迷わない。
CORSエラーは「なんとなく怖い」エラーの代表格ですが、仕組みを理解すれば解決の糸口は見つかります。詰まったら「どこで設定しているか」を全部洗い出すところから始めてみてください。
参考になれば幸いです。
📝 このブログでは、AIと一緒に作った作品の顛末記を書いています
ブログ「システム開発はAIに任せよう！」
👉 https://munchie.jp
コメント