Astro → Cloudflare Workers に fetch でAPIを叩く基本パターンを、そのまま使える形でまとめます。
（あなたの構成：Astro（Pages）＋ Worker API を想定）

✅ ① Cloudflare Worker 側（API）

まずは Worker にJSONを返すAPIを用意👇

export default {
  async fetch(request) {
    return new Response(
      JSON.stringify({ message: "Hello from Worker!" }),
      {
        headers: { "Content-Type": "application/json" },
      }
    );
  },
};

デプロイするとこんなURLになります👇

https://your-worker-name.workers.dev

✅ ② Astro 側（クライアントからfetch）

ブラウザから叩く場合（ボタンなど）

<button onclick="callApi()">API実行</button>

<script>
async function callApi() {
  const res = await fetch("https://your-worker-name.workers.dev");
  const data = await res.json();
  alert(data.message);
}
</script>

👉 一番シンプルな形（今あなたがやってる形）

✅ ③ Astro 側（サーバーサイドでfetch）←重要

Astroの .astro ファイル内で直接呼ぶ方法👇

---
const res = await fetch("https://your-worker-name.workers.dev");
const data = await res.json();
---

<h1>{data.message}</h1>

👉 これが SSR（サーバーサイドレンダリング）版

✅ ④ APIルートとして使う（おすすめ構成）

AstroのAPIルート経由でWorkerを叩く👇

/src/pages/api/test.ts

export async function GET() {
  const res = await fetch("https://your-worker-name.workers.dev");
  const data = await res.json();

  return new Response(JSON.stringify(data), {
    headers: { "Content-Type": "application/json" },
  });
}

フロントから呼ぶ

<button onclick="callApi()">API実行</button>

<script>
async function callApi() {
  const res = await fetch("/api/test");
  const data = await res.json();
  alert(data.message);
}
</script>

✅ ⑤ CORSエラー対策（重要）

Worker側でこれを入れておく👇

headers: {
  "Content-Type": "application/json",
  "Access-Control-Allow-Origin": "*",
}

👉 これを入れないとブラウザfetchでエラー出る

✅ ⑥ 本番でよくあるミス

❌ よくあるエラー

• ERR_SSL_VERSION_OR_CIPHER_MISMATCH

• fetch failed

• CORSエラー

✔ 原因

• PagesとWorkerのURLが違う

• Routes未設定

• HTTPS設定ミス

✅ ⑦ 最強構成（実務向け）

Astro（Pages） → 自前API → Worker

ブラウザ
   ↓
Astro API (/api)
   ↓
Cloudflare Worker

👉 メリット

• CORS不要

• セキュリティ強い

• URL隠せる

🔥 まとめ

• フロント直叩き → 簡単だがCORS必要

• SSR → SEO向き

• API経由 → 最強・実務向け