LESSON 06 / 真实 WORKER 请求

让后端决定请求能不能通过。

HTML 和浏览器 JS 收集输入，Cloudflare 上的 Worker 独立检查请求。这里调用的是已部署的接口，不用前端代码伪造后端结果。

真实接口 · 不保存数据

浏览器
构造 method、headers、body→Worker fetch handler
路由 → 方法 → 类型 → 大小 → 字段→HTTP 响应
状态码、响应头、JSON

前端校验帮助用户填写表单，后端校验负责真正执行规则。直接发送 HTTP 请求可以绕过网页的 maxlength；Worker 仍要检查输入。本站 /api/* 运行 Worker，其他匹配的网页文件由 Static Assets 返回。

先看一次请求

阅读完整课程 ↗

选一个实验，再查看真实请求与响应。全部对比使用固定示例标题。

浏览器发出去的内容

等待请求…

Worker 实际返回的内容

等待响应…

全部对比：通过表示真实响应符合预期，错误输入被拒绝也属于实验通过。
实验	预期状态	实际状态	实际结果	判断

请求体限制 4 KiB 是本项目自己的规则，不是 Cloudflare 平台的最大上传额度。超大输入实验只发送约 5 KiB。所有接口响应使用 no-store；实验不写数据库、不记录你输入的标题到应用日志。

读代码时先认清三个位置

public/workers.js

在浏览器运行。把输入转为 JSON，使用 fetch("/api/echo") 发送请求，展示返回结果。

src/worker.js

在 Cloudflare 运行。fetch(request, env) 接收请求，做校验，然后返回 Response。

wrangler.jsonc

部署配置。main 指向 Worker 代码；/api/* 先执行 Worker；public/ 是静态文件目录。

浏览器发起请求

const response = await fetch("/api/echo", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ title: "准备项目资料" })
});
const result = await response.json();

后端入口的概念结构

// 结构示意；完整校验见 src/worker.js
export default {
  async fetch(request, env) {
    // request：本次传入的 HTTP 请求
    // env：ASSETS、未来的 DB / KV 等绑定
    // 检查路径、方法、请求体与字段
    return Response.json({ saved: false });
  }
};

两个 fetch 含义不同：浏览器里的 fetch() 是发起网络请求；Worker 导出的 fetch handler 是收到请求时的入口。配置里的绑定让 Worker 访问资源，不能把 API 密钥放到 public/ 的浏览器代码中。

阅读完整后端源码 ↗官方 fetch handler 文档 ↗

这次为什么返回 saved: false？

回显接口只处理和校验请求，不执行数据库写入。D1 课已连接真实数据库，展示一条云端记录。模块级数组不能充当持久数据库。

下一课：D1 保存数据 →