CORSプリフライトとは？HTML共有・AI生成サイトでの意味をやさしく解説

ひとことで言うと

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」なら呼び先サーバーの許可設定を確認するという順序で対処してください。