---
title: "外部API呼び出しがCORSで失敗する問題をAI生成HTMLで防ぐプロンプト"
description: "AI生成HTMLで外部APIのCORSエラーを防ぎたい制作者向け。プロンプトにどう書けばAPIキー漏洩やCORSブロックを回避した構成のコードを出力させられるか、具体的な文言例と注意点を解説します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/cors-external-api-ai-prompt"
markdown: "https://giga-site.com/articles/cors-external-api-ai-prompt/index.md"
category: "トラブルシュート"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 4
---
# 外部API呼び出しがCORSで失敗する問題をAI生成HTMLで防ぐプロンプト
ChatGPTやClaudeにHTMLを生成させると、fetchで外部APIを呼ぶコードが当然のように含まれることがあります。しかしAIはCORSポリシーを自動的に考慮してくれないため、生成直後のHTMLは本番URLで動かないことが珍しくありません。プロンプトの書き方を工夫するだけで、CORSエラーを最初から避けた構造のHTMLを生成させることができます。
> Source HTML: https://giga-site.com/articles/cors-external-api-ai-prompt
> Article index: https://giga-site.com/articles/index.md
## よくある原因
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との相性が良いです。
## 関連記事
- [外部API呼び出しがCORSで失敗するときの原因と直し方](https://giga-site.com/articles/cors-external-api-fix/index.md)
- [外部API呼び出しがCORSで失敗するときに共有前に確認するチェックリスト](https://giga-site.com/articles/cors-external-api-checklist/index.md)
- [外部API呼び出しがCORSで失敗するときに相手へ伝える確認依頼の書き方](https://giga-site.com/articles/cors-external-api-request-message/index.md)
- [リンク先が別ドメインに飛ぶ問題をAI生成HTMLで防ぐプロンプト](https://giga-site.com/articles/unexpected-external-link-ai-prompt/index.md)
- [リンク先が別ドメインに飛ぶときの原因と直し方](https://giga-site.com/articles/unexpected-external-link-fix/index.md)
- [リンク先が別ドメインに飛ぶときに共有前に確認するチェックリスト](https://giga-site.com/articles/unexpected-external-link-checklist/index.md)
```json
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "外部API呼び出しがCORSで失敗する問題をAI生成HTMLで防ぐプロンプト",
"description": "AI生成HTMLで外部APIのCORSエラーを防ぎたい制作者向け。プロンプトにどう書けばAPIキー漏洩やCORSブロックを回避した構成のコードを出力させられるか、具体的な文言例と注意点を解説します。",
"datePublished": "2026-06-25",
"dateModified": "2026-06-25",
"mainEntityOfPage": "https://giga-site.com/articles/cors-external-api-ai-prompt",
"url": "https://giga-site.com/articles/cors-external-api-ai-prompt",
"inLanguage": "ja",
"image": "https://giga-site.com/og-image.png",
"articleSection": "トラブルシュート",
"author": {
"@type": "Organization",
"name": "ギガサイト便"
},
"publisher": {
"@type": "Organization",
"name": "ギガサイト便"
},
"mainEntity": [
{
"@type": "Question",
"name": "AIに「CORSを考慮したHTMLを作って」と指示しただけでは不十分ですか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "多くの場合不十分です。「プロキシサーバーが使えない環境で、APIキーをHTMLに含めずにデータを取得する方法」まで具体的に制約を伝えると、より現実的な構成が出力されます。"
}
},
{
"@type": "Question",
"name": "生成されたHTMLのCORSエラーをAIに自動修正させる方法はありますか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "ブラウザのコンソールに出たCORSエラーの全文をAIにそのまま貼り付けて「このエラーを修正して」と伝えると、エラーメッセージを解析して適切な修正案を出してくれます。エラー文の引用が最も効果的です。"
}
},
{
"@type": "Question",
"name": "CORS不要のAPIとして使いやすいサービスはどこで探せますか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "「public APIs CORS enabled」で検索すると、Public-APIs というGitHubリポジトリが見つかります。Corsの列が「Yes」のAPIはクライアントサイドから直接呼べるため、AI生成HTMLとの相性が良いです。"
}
}
]
}
```