实验：Pages 调用 Workers

这个实验展示 Pages 页面如何通过 fetch('/api/demo') 调用 Workers。

前端代码

在 VitePress Markdown 中可以直接写 Vue 组件。本教程站点已经内置了一个可复用组件：

<WorkerDemo />

它会在点击按钮后请求：

/api/demo

并把 Workers 返回的 JSON 显示在页面中。

为什么路径是 /api/demo

Pages 和 Workers 部署在同一个 Pages 项目下时，前端可以直接请求：

/api/demo

Cloudflare 会把该路径交给 Pages Functions 处理。

预期结果

点击按钮后，页面会显示类似：

{
  "message": "Hello from Cloudflare Workers",
  "bucket": "connected"
}

如果看到 bucket: "missing"，说明 R2 绑定还没有生效。