よくある原因
AIツールはプロンプトに「天気APIを呼んで表示して」と書くと、APIキーをJavaScript内に直書きしてfetchするコードを生成します。これは動作するサンプルとしては正しいですが、公開HTMLとして配布するには2つの問題があります。①APIキーがソースから盗まれる、②配布先ドメインがAPI側のCORS許可リストに入っていない。
AIが生成するHTMLはローカル（file://）で動作確認したものをそのまま出力するため、プリフライトが発生する構成でも気づかれないまま含まれます。特にPOSTやカスタムヘッダーを使うAPIをGETに変えずに出力してくるケースでは、共有後に必ずCORSエラーが起きます。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
自分側で確認すること
生成されたHTMLをそのまま使う前に、scriptタグ内のfetchを全件検索（Ctrl+Fで「fetch(」）し、外部オリジンへのリクエストがないか確認します。外部オリジンへのfetchが見つかったら、そのAPIがCORSを許可しているかをドキュメントで確認するか、Chromeのコンソールで実際に試します。
確認の結果、CORSが通らない場合はAIに追加指示を出します。「このAPIコールをサーバーサイドプロキシ経由に変更して。フロントエンドはhttps://myapp.example.com/api/weatherを呼ぶだけにして」と指示すると、AIは変換後の構成を出力します。ただしプロキシのサーバーコードも合わせて生成させないと片手落ちになります。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
相手側で確認すること
AI生成HTMLを共有した相手から「データが出ない」と言われたとき、まず相手が見ているブラウザのコンソールを確認してもらいます。「F12を押してConsoleタブを選択し、赤いエラーがあればスクリーンショットを送ってほしい」と伝えるのが最短の診断手順です。
コンソールにCORSエラーが出ている場合、相手側の問題ではなくHTMLの設計の問題です。その場合はAIに「CORSエラーなしで動くよう、プロキシまたはAPIキー不要の代替エンドポイントを使う構成に書き直して」と再生成を依頼します。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
再発防止の運用
AI生成HTMLに外部APIを組み込む際に使えるプロンプトテンプレートを手元に持っておくと効率的です。例：「外部APIのエンドポイントは変数API_ENDPOINTに切り出し、CORSが通らない場合は/api/proxyを呼ぶフォールバックを入れてください。APIキーはHTMLに直書きせず、環境変数から取得するコメントを入れてください」。
生成後の確認ステップも定型化します。①fetchの送信先を列挙 → ②各エンドポイントのCORS設定を確認 → ③ギガサイト便でプレビューURL発行後にシークレットウィンドウでコンソール確認。この3ステップをチェックリストにしてチーム内で共有しておくと、AI生成コードの品質を安定させられます。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
よくある質問
AIに「CORSを考慮したHTMLを作って」と指示しただけでは不十分ですか？
多くの場合不十分です。「プロキシサーバーが使えない環境で、APIキーをHTMLに含めずにデータを取得する方法」まで具体的に制約を伝えると、より現実的な構成が出力されます。
生成されたHTMLのCORSエラーをAIに自動修正させる方法はありますか？
ブラウザのコンソールに出たCORSエラーの全文をAIにそのまま貼り付けて「このエラーを修正して」と伝えると、エラーメッセージを解析して適切な修正案を出してくれます。エラー文の引用が最も効果的です。
CORS不要のAPIとして使いやすいサービスはどこで探せますか？
「public APIs CORS enabled」で検索すると、Public-APIs というGitHubリポジトリが見つかります。Corsの列が「Yes」のAPIはクライアントサイドから直接呼べるため、AI生成HTMLとの相性が良いです。