Designing a REST API with Workers

// A single-file REST API on one Worker.

// CORS = Cross-Origin Resource Sharing（跨來源資源共用）：
// 這些標頭讓「別的網域」的瀏覽器前端可以呼叫我們。
const CORS = {
  "Access-Control-Allow-Origin": "*", // 誰可以呼叫（* = 任何人；正式環境請鎖成你的網域）
  "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
  "Access-Control-Allow-Headers": "Content-Type",
};

// 一個小小的記憶體資料（重啟會清空——正式請改用 D1 / KV）。
let users = [
  { id: 1, name: "Ada" },
  { id: 2, name: "Linus" },
];
let nextId = 3;

// 用一個 helper 統一產生每個 JSON 回應：資料 + 狀態碼 + CORS 標頭。
function json(data, status = 200) {
  return Response.json(data, { status, headers: CORS });
}

export default {
  async fetch(request) {
    const { pathname } = new URL(request.url); // 例如 "/api/users/2"
    const method = request.method;             // 例如 "GET"

    // 1) CORS 預檢：瀏覽器在真正跨站請求前會先送 OPTIONS。
    if (method === "OPTIONS") {
      return new Response(null, { status: 204, headers: CORS });
    }

    // 2) 只服務我們的 API 路徑；其餘一律 404 Not Found（找不到）。
    if (!pathname.startsWith("/api/users")) {
      return json({ error: "Not found" }, 404);
    }

    // 3) 從 /api/users/:id 取出可有可無的 id。
    const parts = pathname.split("/").filter(Boolean); // ["api","users","2"]
    const id = parts[2] ? Number(parts[2]) : null;

    try {
      // GET /api/users → 列出全部（200 OK）
      if (method === "GET" && id === null) {
        return json(users, 200);
      }

      // GET /api/users/:id → 取單筆（200，找不到 404）
      if (method === "GET" && id !== null) {
        const user = users.find((u) => u.id === id);
        return user ? json(user, 200) : json({ error: "User not found" }, 404);
      }

      // POST /api/users → 新增（201 Created，輸入不合法 400 Bad Request）
      if (method === "POST" && id === null) {
        const body = await request.json();
        if (typeof body?.name !== "string") {
          return json({ error: "name is required" }, 400);
        }
        const user = { id: nextId++, name: body.name };
        users.push(user);
        return json(user, 201);
      }

      // PUT /api/users/:id → 更新（200 / 400 / 404）
      if (method === "PUT" && id !== null) {
        const user = users.find((u) => u.id === id);
        if (!user) return json({ error: "User not found" }, 404);
        const body = await request.json();
        if (typeof body?.name !== "string") {
          return json({ error: "name is required" }, 400);
        }
        user.name = body.name;
        return json(user, 200);
      }

      // DELETE /api/users/:id → 刪除（200，找不到 404）
      if (method === "DELETE" && id !== null) {
        const before = users.length;
        users = users.filter((u) => u.id !== id);
        return before === users.length
          ? json({ error: "User not found" }, 404)
          : json({ ok: true }, 200);
      }

      // 路徑存在，但方法不對 → 405 Method Not Allowed（方法不允許）。
      return json({ error: "Method not allowed" }, 405);
    } catch (err) {
      // JSON 內容壞掉或其他意外 → 400 Bad Request。
      return json({ error: "Invalid request" }, 400);
    }
  },
};

// 這段跑在瀏覽器裡。換成你部署後拿到的網址。
const API = "https://my-api.<your-subdomain>.workers.dev/api/users";

// GET：列出全部使用者
const res = await fetch(API);
console.log(res.status, await res.json()); // 200, [ {id:1,...}, ... ]

// POST：新增一筆（把 JSON 放在 body，並標明 Content-Type）
const created = await fetch(API, {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ name: "Grace" }),
});
console.log(created.status, await created.json()); // 201, { id: 3, name: "Grace" }

// PUT：更新 id = 3 那筆
await fetch(`${API}/3`, {
  method: "PUT",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ name: "Grace H." }),
});

// DELETE：刪掉 id = 3 那筆
await fetch(`${API}/3`, { method: "DELETE" });

name = "my-api"
main = "src/index.js"
compatibility_date = "2025-01-01"