139. CORS & HTMX（CORS対策：ドメインの「壁」を正しく越える方法）
原理：よその家のドアを叩く
ブラウザの厳しい用心棒
通常、あなたのサイト（mysite.com）から、別のサイト（api.othersite.com）に対して、HTMXで情報をこっそり取ってくることはできません。ブラウザには「同じドメイン以外とは勝手に通信させない！」という厳しいセキュリティルール（同一生成元ポリシー）があるからです。
「CORS（コルス / Cross-Origin Resource Sharing）」とは、「よそのサイト（異なるドメイン）からのHTMXリクエストを、許可していいかどうかをサーバー側で判断し、ブラウザの許可証を出すための仕組み」です。
実践：よそのサーバーと仲良くなるためのルール
1. サーバー側で「許可証」を出す
呼び出す先のサーバー（API側）のレスポンスヘッダーに、許可を与える記述をします。
/* 呼び出す先(サーバー)のレスポンスヘッダー */
Access-Control-Allow-Origin: https://mysite.com
Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Headers: hx-request, hx-target, hx-current-url
2. HTMX独自の注意点：カスタムヘッダーの許可
HTMXは hx-request などの「独自のヘッダー」を使います（126.）。
CORS通信でこれらのヘッダーを無事にサーバーへ届け、さらにサーバーからの指示ヘッダー（127.）を読み取るためには、それらの名前も「許可リスト」に追加してもらう必要があります。
3. ステップ・バイ・ステップ解説
- 「よそ」と通信しているか確認: 自分以外のドメインに
hx-getなどを飛ばそうとしたとき、ブラウザの赤文字エラー（CORS error）が出たらこれが原因です。 - APIサーバーに許可をもらう: 相手側のサーバー設定（または呼び出し許可設定）で、自分のサイトのURLを登録します。
- HXヘッダーを許可する:
Access-Control-Allow-Headersに、HTMXが使うヘッダー名を列挙します。
比較：同一ドメイン内 vs クロスドメイン（CORS）
同一ドメイン内
- 設定: 不要。HTMXを貼るだけで自由に通信できる。
クロスドメイン (CORS)
- 設定: 必須。呼び出す先のサーバー側で「許可」の手続きが必要。
- リスク: 許可しすぎると、無関係なサイトから自分のAPIを悪用される可能性がある（注意が必要）。
まとめ：初心者のための「壁の越え方」
CORSは最初は難しく感じますが、Webの安全性を守るための「優しい門番」です。
- 基本は「自前」で: 最初は同じドメイン内で開発を進めるのが一番簡単です。外部APIを使いたいときだけ、CORSを意識しましょう。
- 開発ツールが教えてくれる: エラーが出たときはブラウザの「検証（コンソール）」を見ましょう。「このヘッダーが足りないよ」と親切に教えてくれているはずです。
- 許可は最小限に:
*（すべて許可）という設定もできますが、できるだけ「自分のサイトだけ」を名指しで許可するのが、セキュリティ上の鉄則です。
ルールを知り、正しくドアを開ける。CORSという「Webの国境」を理解して、安全かつ自由に世界中とデータをやり取りできる、オープンでモダンなWebアプリを構築してください。第7章のラストは、これらが正しく動いているか確かめる「テスト（140. Testing Responses）」です。