Cloudflare Pages 前端

1. 点击 Compute (Workers) -> Workers & Pages -> Create

   

2. 选择 Pages，选择 Use direct upload

   

3. 输入部署的 worker 地址，必须填写后端 API 根地址，并且以 https:// 开头，地址不要带 /，点击生成，成功会出现下载按钮，你会得到一个 zip 包

   • 此处 worker 域名为后端 api 的域名，比如我部署在 https://temp-email-api.awsl.uk，则填写 https://temp-email-api.awsl.uk
   • 如果你的域名是 https://temp-email-api.xxx.workers.dev，则填写 https://temp-email-api.xxx.workers.dev
   • 不要填写前端 Pages 自己的域名，也不要带 /admin、/api 等路径，否则前端请求会打到错误地址，可能出现 Cannot read properties of undefined (reading 'map') 或 405 Method Not Allowed
   • 填写前请先在浏览器打开 https://你的worker域名/open_api/settings，确认返回 JSON；如果返回 HTML、404、405 或 Cloudflare 挑战页，请先修复 Worker 绑定、变量或安全策略

   注意

   worker.dev 域名在中国无法访问，请自定义域名

   不要给后端 API 域名开启 Under Attack、Bot Fight、Managed Challenge 等会返回浏览器挑战页的安全策略。前端 XHR 请求无法完成这些挑战，常见表现是 Network Error。

   示例：`https://temp-email-api.example.com`，不要填写前端 Pages 域名，也不要带结尾 `/`。

   NOTE

   你也可以手动部署，从这里下载 zip, frontend.zip

   修改压缩包里面的 index-xxx.js 文件 ，xx 是随机的字符串

   搜索 https://temp-email-api.xxx.xxx ，替换成你 worker 的后端 API 根地址，然后部署新的 zip 文件。如果填成前端 Pages 域名，常见现象就是页面报 map 错误或接口返回 405

   如果第一次填错后重新部署仍然报错，请用无痕窗口测试或清理浏览器缓存，避免浏览器继续使用旧的前端资源。

4. 选择 Pages，点击 Create Pages, 修改名称，上传下载的 zip 包

   重要：SPA 模式

   本项目是单页应用（SPA），必须在部署时展开高级选项，将「未找到处理」设置为 Single-page application (SPA)。 否则刷新页面或直接访问 /admin 等子路径时会返回 404。

   

   然后点击 Deploy

   

5. 打开 刚刚部署的 Pages，点击 Custom Domain 这里可以添加自己的域名，你也可以使用自动生成的 *.pages.dev 的域名。能打开域名说明部署成功。