如何让Cloudflare托管挑战在主应用触发，避免API调用出现403错误？

1. 调整WAF挑战规则的优先级与匹配范围 #

• 登录Cloudflare仪表盘，进入「安全」→「WAF」→「规则」，编辑现有托管挑战规则：
  • 将匹配条件设为主机名等于ourapplication.com，并把该规则优先级设为最高（数值越小优先级越高）。
  • 新增规则匹配backend.ourapplication.com/*，触发条件设为cf.challenge.passed 等于 false，动作为重定向到ourapplication.com（或主应用内的提示页面），避免直接返回403。
  • 再添加允许规则：当cf.challenge.passed 等于 true时，允许访问backend.ourapplication.com的所有API路径。

2. 确保跨域请求携带验证Cookie #

• 前端SPA调用后端API时开启跨域凭证传递：
  • 使用fetch时添加credentials: 'include'参数；
  • 使用axios时设置withCredentials: true。
• 在Cloudflare后端域名的「CORS」设置中配置：
  • 允许的源设为ourapplication.com；
  • 勾选「允许凭证」选项。

3. 修复Cloudflare Pages的SPA路由规则 #

• 进入Cloudflare Pages的「设置」→「路由」→「重写规则」，添加一条规则：
  • 路径为/*，指向/index.html，确保所有前端路由请求都被Cloudflare处理，从而触发托管挑战。

4. 用Cloudflare Access统一验证流程（可选） #

• 开启Cloudflare Access，为主域名ourapplication.com设置访问策略，要求用户通过托管挑战验证后才能访问。
• 为后端域名backend.ourapplication.com关联相同的Access策略，用户在主应用通过验证后，API请求会自动携带验证会话，无需重复挑战。

内容的提问来源于stack exchange，提问作者Vojtěch