NextJS重写至公开可访问应用失效问题求助

• 打开浏览器开发者工具（按F12），切换到「网络」标签页
• 刷新通过NextJS访问的页面，筛选出加载失败的请求（通常是红色状态，或状态提示CORS相关错误）
• 查看「控制台」面板，CORS问题会直接抛出明确错误，比如「Blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource」
• 点击失败的请求，切换到「响应头」标签，检查是否存在Access-Control-Allow-Origin字段，其值是否包含你的NextJS应用的域名

如果确实是CORS导致的问题，分两种情况处理：

• 如果你有权限修改目标应用的配置：直接更新目标应用的CORS设置，将你的NextJS应用域名加入Access-Control-Allow-Origin的允许列表；如果不需要凭证（如Cookie），也可以临时设为*（生产环境不推荐，风险较高）
• 如果你无法控制目标应用：必须请求目标应用的所有者，将你的NextJS应用域名添加到Access-Control-Allow-Origin的允许列表中；如果你的请求需要携带凭证，还要让对方同时设置Access-Control-Allow-Credentials: true

除了CORS，NextJS的rewrite配置也可能导致问题：

• 检查next.config.js中的rewrites规则，确认路径匹配是否正确（比如:path*是否正确传递了所有子路径）
• 必要时在rewrites规则中添加自定义请求头，确保目标应用能正确识别来源，示例配置：

module.exports = {
  async rewrites() {
    return [
      {
        source: '/your-app-path/:path*',
        destination: 'https://target-app-domain/:path*',
        headers: {
          'X-Forwarded-Host': 'your-nextjs-domain.com',
        },
      },
    ];
  },
};

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