---
title: "外部API呼び出しがCORSで失敗するときに共有前に確認するチェックリスト"
description: "AI生成HTMLや静的ページで外部APIを呼んでいる人が、共有リンクを送る前に確認すべきCORSまわりのポイントを網羅したチェックリスト。ブラウザコンソールの見方から依頼文の書き方まで一気通貫で整理しています。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/cors-external-api-checklist"
markdown: "https://giga-site.com/articles/cors-external-api-checklist/index.md"
category: "トラブルシュート"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# 外部API呼び出しがCORSで失敗するときに共有前に確認するチェックリスト

外部APIとの通信がCORSで失敗したまま静的HTMLを共有すると、受け取った相手の画面では肝心のデータが何も表示されません。共有前の数分間にこのチェックリストを通すだけで、「送ったのに動かない」というトラブルの大半を未然に防げます。

> Source HTML: https://giga-site.com/articles/cors-external-api-checklist
> Article index: https://giga-site.com/articles/index.md

## よくある原因

静的HTMLでのCORSトラブルで最も多いのは、開発者が意識せずAPIのエンドポイントをHTMLに直書きし、そのAPIが他ドメインからの呼び出しを想定していないケースです。特にRapidAPIや個人APIサービスは、デフォルトで登録済みドメインのみを許可する設定になっているものが多く、ギガサイト便のURLを許可リストに加える必要があります。

Content-Typeをapplication/jsonに設定したfetchは自動的にプリフライト（OPTIONSリクエスト）を発生させます。チェックリスト作成の前提として、「自分のHTMLがどのメソッドとヘッダーでAPIを呼んでいるか」を把握しておくことが重要です。Networkタブを開いた状態でページをリロードし、OPTIONSが出ていればプリフライト必須の呼び出しです。

- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく

## 自分側で確認すること

チェック1：ブラウザのコンソールにCORSエラーが出ていないか確認する。エラーメッセージに「blocked by CORS policy」と書かれていれば対象です。チェック2：HTMLのscriptタグ内でfetchしているURLをすべてリストアップし、それぞれが自分のドメインと異なるオリジンであるか確認する。

チェック3：使用しているAPIサービスのダッシュボードにログインし、「許可オリジン」または「Allowed Origins」の設定欄に共有先のURL（例：gigasite-bin.com のプレビューURL）を追加する。チェック4：追加後にブラウザキャッシュをクリアして再度APIコールが成功するか確認する。失敗する場合はNetworkタブでOPTIONSレスポンスのヘッダーを確認し、Access-Control-Allow-Originの値が正しいか見る。

- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する

## 相手側で確認すること

共有相手がHTMLを受け取って「データが表示されない」と報告してきた場合、まずブラウザとOSのバージョンを聞きます。SafariとChromeではCORSエラーの出方が微妙に異なり、Safariは一部のプリフライトを独自に処理するため、Chromeで動いてもSafariで失敗するケースがあります。

相手にはコンソールのエラーメッセージをスクリーンショットで送ってもらうよう依頼するのが最短です。エラー文に含まれる「Origin」の値を確認し、その値がAPIサービスの許可リストに入っているかを突き合わせます。許可リストを自分で管理していない場合は、APIプロバイダへの問い合わせが必要です。

- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する

## 再発防止の運用

外部APIを呼ぶHTMLを作るたびに同じチェックを繰り返さないよう、テンプレートHTMLの先頭コメントに「使用API一覧・許可オリジン登録日」を記録する習慣をつけます。3か月後に別のドメインで公開したときに登録漏れを防げます。

共有前の最終確認は、実際に共有するURLと同じオリジンで開いたブラウザでテストすることが原則です。ギガサイト便でURL発行後、そのURLをChromeのシークレットウィンドウで開いてコンソールを確認する手順を標準フローにしておくと、APIの動作確認と認証の確認を同時にできます。

- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する

## よくある質問

### 許可オリジンにワイルドカード「*」を設定してもCORSエラーが出るのはなぜですか？

ワイルドカードはCredentials（Cookieや認証ヘッダー）付きのリクエストには使えないブラウザ仕様があります。credentialsを送る場合は具体的なオリジンを指定し、Access-Control-Allow-Credentialsもtrueにする必要があります。

### ギガサイト便のプレビューURLはどの形式で許可リストに登録すればよいですか？

プロトコルとホスト名を含む完全な形（例：https://xxx.gigasite-bin.com）で登録します。末尾のスラッシュやパスを含めるとマッチしないサービスもあるため、ホスト名までで登録してください。

### APIキーをHTMLに直書きしている場合、CORSを解決した後もセキュリティリスクはありますか？

はい。HTMLのソースを見た人はAPIキーを取得できます。プロキシサーバー経由に切り替えるか、ギガサイト便のパスワード認証・会社ドメイン認証で閲覧者を絞ることを検討してください。

## 関連記事

- [外部API呼び出しがCORSで失敗するときの原因と直し方](https://giga-site.com/articles/cors-external-api-fix/index.md)
- [外部API呼び出しがCORSで失敗する問題をAI生成HTMLで防ぐプロンプト](https://giga-site.com/articles/cors-external-api-ai-prompt/index.md)
- [外部API呼び出しがCORSで失敗するときに相手へ伝える確認依頼の書き方](https://giga-site.com/articles/cors-external-api-request-message/index.md)
- [リンク先が別ドメインに飛ぶときに共有前に確認するチェックリスト](https://giga-site.com/articles/unexpected-external-link-checklist/index.md)
- [リンク先が別ドメインに飛ぶときの原因と直し方](https://giga-site.com/articles/unexpected-external-link-fix/index.md)
- [リンク先が別ドメインに飛ぶ問題をAI生成HTMLで防ぐプロンプト](https://giga-site.com/articles/unexpected-external-link-ai-prompt/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "外部API呼び出しがCORSで失敗するときに共有前に確認するチェックリスト",
  "description": "AI生成HTMLや静的ページで外部APIを呼んでいる人が、共有リンクを送る前に確認すべきCORSまわりのポイントを網羅したチェックリスト。ブラウザコンソールの見方から依頼文の書き方まで一気通貫で整理しています。",
  "datePublished": "2026-06-25",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/cors-external-api-checklist",
  "url": "https://giga-site.com/articles/cors-external-api-checklist",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "トラブルシュート",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "許可オリジンにワイルドカード「*」を設定してもCORSエラーが出るのはなぜですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "ワイルドカードはCredentials（Cookieや認証ヘッダー）付きのリクエストには使えないブラウザ仕様があります。credentialsを送る場合は具体的なオリジンを指定し、Access-Control-Allow-Credentialsもtrueにする必要があります。"
      }
    },
    {
      "@type": "Question",
      "name": "ギガサイト便のプレビューURLはどの形式で許可リストに登録すればよいですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "プロトコルとホスト名を含む完全な形（例：https://xxx.gigasite-bin.com）で登録します。末尾のスラッシュやパスを含めるとマッチしないサービスもあるため、ホスト名までで登録してください。"
      }
    },
    {
      "@type": "Question",
      "name": "APIキーをHTMLに直書きしている場合、CORSを解決した後もセキュリティリスクはありますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "はい。HTMLのソースを見た人はAPIキーを取得できます。プロキシサーバー経由に切り替えるか、ギガサイト便のパスワード認証・会社ドメイン認証で閲覧者を絞ることを検討してください。"
      }
    }
  ]
}
```