---
title: "CORSプリフライトとは？HTML共有・AI生成サイトでの意味をやさしく解説"
description: "HTML共有やAI生成サイトを公開する担当者が知っておくべきCORSプリフライトの仕組みを、ブラウザの動作・エラーの見方・共有時の注意点に沿って具体的に解説します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/what-is-cors-preflight-html-share"
markdown: "https://giga-site.com/articles/what-is-cors-preflight-html-share/index.md"
category: "用語解説"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# CORSプリフライトとは？HTML共有・AI生成サイトでの意味をやさしく解説

AIで生成したHTMLを公開URLで共有すると、ページ内のAPIリクエストがブラウザに止められる場面があります。その原因として最もよく登場するのがCORSプリフライトです。仕組みを知っておくと、共有したページが「なぜか動かない」トラブルを素早く切り分けられます。

> Source HTML: https://giga-site.com/articles/what-is-cors-preflight-html-share
> Article index: https://giga-site.com/articles/index.md

## ひとことで言うと

CORSプリフライトとは、ブラウザが「本命のリクエストを送る前に許可を確認する問い合わせ」を自動で行う仕組みです。異なるオリジン（ドメイン・ポート・スキームのいずれかが異なるURL）へPUTやDELETE、カスタムヘッダーを含むリクエストを出すとき、ブラウザはまず OPTIONS メソッドの事前リクエストを送り、サーバーの `Access-Control-Allow-*` ヘッダーで許可が返ってきた場合のみ本番リクエストを実行します。

このプリフライトはブラウザが自動で行うもので、ユーザーの目には見えません。しかし許可が返らなかった場合、ブラウザは本命リクエストを送らずにエラーとして扱います。開発者ツールのコンソールに「CORS policy: No 'Access-Control-Allow-Origin' header」のようなメッセージが出たら、プリフライトが拒否されたサインです。

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

## HTML共有で関係する場面

AIが生成したHTMLに外部APIへのfetchが含まれている場合、そのAPIサーバーが共有ドメインからのリクエストを許可していなければプリフライトで弾かれます。たとえば、`https://preview.example.com` から `https://api.otherdomain.com` へリクエストを投げると、`otherdomain.com` が `Access-Control-Allow-Origin: https://preview.example.com` を返さない限り動作しません。

ギガサイト便などのサービスでは、HTMLを独自ドメインのURLで公開するため、コード内で参照しているAPIのオリジンが変わることがあります。ローカルで動いていたfetchが共有後に突然失敗する場合、まず開発者ツールの「ネットワーク」タブでステータスが `(failed)` や `cors error` になっているリクエストを探してください。

## よくある誤解

「CORSはサーバー側の問題だからHTMLを直しても意味がない」という誤解があります。実際にはHTMLやJavaScriptで同一オリジンのプロキシを経由するように書き換えるか、CORS対応済みの代替APIエンドポイントを使うことで回避できるケースが多いです。コードの書き方次第で改善できる問題だと覚えておきましょう。

「プリフライトはセキュリティ上の欠陥」と捉えられることもありますが、逆です。プリフライトはユーザーのブラウザが勝手に別サービスへ有害なリクエストを送られないための保護機能です。API側が緩い設定（`Access-Control-Allow-Origin: *`）を返せばプリフライトは通りますが、認証が絡む場面では `*` は使えないため、用途に応じた設定が必要です。

## 安全に使うための注意点

AI生成HTMLを共有URLに乗せる前に、コード内のfetch先ドメインを一覧化してください。公開後に変わるオリジンに対してCORS許可が出ないエンドポイントが含まれていれば、そのfetchは共有先では機能しないと判断できます。修正方法としては、APIキーが不要なパブリックエンドポイントに変更するか、機能自体をスタティックなデータに差し替えるのが現実的です。

共有サービスがHTTPSで配信しているのに、コード内でHTTPのAPIを呼んでいると「Mixed Content」エラーが先に出てCORSエラーと混同されやすいです。まずブラウザコンソールのエラーメッセージを正確に読み、「Mixed Content」なら呼び先URLをHTTPSに変更、「CORS」なら呼び先サーバーの許可設定を確認するという順序で対処してください。

## よくある質問

### プリフライトが発生するリクエストとしないリクエストの違いは何ですか？

GETやPOSTでContent-Typeがapplication/x-www-form-urlencoded等の場合は「シンプルリクエスト」扱いでプリフライトなしです。JSONボディやカスタムヘッダーを使う場合はプリフライトが発生します。

### ローカルで動いたAI生成ページが共有URLで動かなくなりました。CORSが原因か確認するには？

ブラウザの開発者ツールを開き「コンソール」タブに 'Access-Control-Allow-Origin' を含むエラーがあればCORSが原因です。「ネットワーク」タブでOPTIONSリクエストが赤くなっていればプリフライト失敗を示します。

### 共有先でCORSエラーが出るとき、HTMLコード側でできる最も簡単な対処は何ですか？

外部APIへの直接fetchをやめ、レスポンスデータをJSONとしてHTMLに静的に埋め込む方法が最も手軽です。データが変わらないケースや共有期間が短い場合に有効で、APIとのCORS設定調整が不要になります。

## 関連記事

- [SRI（Subresource Integrity）とは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-sri-html-share/index.md)
- [Referrer-Policyとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-referrer-policy-html-share/index.md)
- [Permissions-Policyとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-permissions-policy-html-share/index.md)
- [Same-Origin Policyとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-same-origin-policy-html-share/index.md)
- [sandbox付きiframeとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-sandbox-iframe-html-share/index.md)
- [CSP nonceとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-csp-nonce-html-share/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "CORSプリフライトとは？HTML共有・AI生成サイトでの意味をやさしく解説",
  "description": "HTML共有やAI生成サイトを公開する担当者が知っておくべきCORSプリフライトの仕組みを、ブラウザの動作・エラーの見方・共有時の注意点に沿って具体的に解説します。",
  "datePublished": "2026-06-25",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/what-is-cors-preflight-html-share",
  "url": "https://giga-site.com/articles/what-is-cors-preflight-html-share",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "用語解説",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "プリフライトが発生するリクエストとしないリクエストの違いは何ですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "GETやPOSTでContent-Typeがapplication/x-www-form-urlencoded等の場合は「シンプルリクエスト」扱いでプリフライトなしです。JSONボディやカスタムヘッダーを使う場合はプリフライトが発生します。"
      }
    },
    {
      "@type": "Question",
      "name": "ローカルで動いたAI生成ページが共有URLで動かなくなりました。CORSが原因か確認するには？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "ブラウザの開発者ツールを開き「コンソール」タブに 'Access-Control-Allow-Origin' を含むエラーがあればCORSが原因です。「ネットワーク」タブでOPTIONSリクエストが赤くなっていればプリフライト失敗を示します。"
      }
    },
    {
      "@type": "Question",
      "name": "共有先でCORSエラーが出るとき、HTMLコード側でできる最も簡単な対処は何ですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "外部APIへの直接fetchをやめ、レスポンスデータをJSONとしてHTMLに静的に埋め込む方法が最も手軽です。データが変わらないケースや共有期間が短い場合に有効で、APIとのCORS設定調整が不要になります。"
      }
    }
  ]
}
```