NextJS SPA调用PHP API遇Cloudflare托管挑战致403问题求解

• NextJS SPA客户端直接调用PHP API时，Cloudflare会对后续API请求触发托管挑战并返回403，但受CORS限制，前端无法捕获准确状态码，只能收到通用网络错误
• 纯PHP站点无此问题，因请求由服务端发起，Cloudflare挑战逻辑不同
• 无法放宽Cloudflare防护或使用IP白名单，需保留DDoS防护能力

1. 通过NextJS代理转发API请求 #

将客户端的API请求先发给NextJS服务器，再由NextJS转发到PHP API，模拟纯PHP站点的服务端请求逻辑：

• 在next.config.js中配置路由重写：

module.exports = {
  async rewrites() {
    return [
      {
        source: '/api/:path*',
        destination: 'https://你的PHP API域名/:path*',
      },
    ];
  },
};

• 前端axios请求改为指向同域的/api/xxx路径，而非直接请求PHP API域名
• PHP API需通过X-Forwarded-For头获取真实客户端IP，确保Cloudflare的DDoS防护仍基于用户真实IP生效
• 优势：同域请求无CORS限制，前端能准确捕获API返回的状态码；NextJS服务器发起的请求不会触发Cloudflare客户端托管挑战

2. 优化错误检测与挑战触发逻辑 #

即使无法获取403状态码，可通过特征识别Cloudflare挑战并主动触发验证：

• 捕获axios网络错误时，检查错误信息中是否包含Cloudflare、challenge等特征字符串
• 判定为挑战时，引导用户主动访问PHP API的公开接口（如健康检查接口），触发挑战界面，而非直接刷新前端
• 示例axios拦截器代码：

axios.interceptors.response.use(
  response => response,
  error => {
    if (error.message.includes('Cloudflare') || error.message.includes('403')) {
      alert('需要完成安全验证，请点击确定打开验证页面');
      window.open('https://你的PHP API域名/health', '_blank');
    }
    return Promise.reject(error);
  }
);

3. 配置Cloudflare防火墙规则，基于Cookie放行已验证用户 #

用户完成托管挑战后，Cloudflare会设置专属Cookie（如__cf_bm），可通过规则放行带有效Cookie的API请求：

• 登录Cloudflare控制台，进入「防火墙规则」
• 添加规则：当请求路径匹配API前缀（如/api/*），且请求Cookie包含有效的Cloudflare挑战Cookie时，执行「允许」操作
• 补充规则：未携带有效Cookie的API请求，触发托管挑战
• 优势：既保留DDoS防护，又避免已验证用户的API请求被重复拦截

4. 替换为Cloudflare Turnstile主动验证 #

使用Turnstile替代被动托管挑战，主动在前端完成验证后再发起API请求：

• 前端集成Turnstile组件，在页面加载或API请求前获取验证token
• API请求时将token携带在请求头或参数中
• PHP API调用Cloudflare Turnstile API验证token有效性，验证通过后处理请求
• 优势：完全控制验证时机，避免Cloudflare被动触发挑战导致的API请求失败

内容的提问来源于stack exchange，提问作者recold