前端部署至Vercel后无法调用Heroku上的Laravel后端接口

可能的原因及解决步骤 #

• CORS 跨域配置问题
  Vercel部署的前端域名与Heroku后端域名分属不同域，浏览器会触发CORS预检机制。检查Laravel后端的CORS配置：

  • 打开config/cors.php，确认allowed_origins数组包含你的Vercel应用域名（例如https://your-app.vercel.app，务必带上https://）
  • 确保allowed_methods包含GET，allowed_headers覆盖请求中携带的所有自定义头
  • 若使用fruitcake/laravel-cors包，执行php artisan config:cache清除配置缓存，确保新配置生效

• Heroku后端的代理信任与IP限制
  Laravel可能因未正确识别Vercel的代理服务器，导致请求被拦截：

  • 修改config/app.php中的trusted_proxies配置，添加Vercel的IP段，或者临时设为'*'用于测试（生产环境建议指定具体IP范围）
  • 通过heroku logs --tail查看Heroku实时日志，排查是否存在403/401状态码的请求记录，确认是否是IP被拒绝访问

• Next.js环境变量与请求路径错误
  部署到Vercel后，环境变量可能未正确配置：

  • 检查请求API的地址是否依赖环境变量，在Vercel项目设置的“环境变量”中添加NEXT_PUBLIC_API_URL（注意前缀NEXT_PUBLIC_确保前端能读取），值设为Heroku后端的完整域名
  • 确认请求路径是否正确，比如是否遗漏了Laravel路由的前缀，或者是否需要在请求头中携带Accept: application/json等必要标识

• Vercel边缘缓存干扰
  Vercel的边缘网络缓存可能导致GET请求返回旧的错误响应：

  • 在请求中添加Cache-Control: no-cache头，绕过缓存测试
  • 在next.config.js中配置headers规则，针对API请求禁用缓存：

    module.exports = {
      async headers() {
        return [
          {
            source: '/api/(.*)',
            headers: [
              { key: 'Cache-Control', value: 'no-cache, no-store, must-revalidate' },
            ],
          },
        ];
      },
    };
    

类似情况反馈 #

不少开发者在将Next.js部署到Vercel、后端留在Heroku的迁移场景中，都遇到过类似的GET请求失败问题，多数集中在CORS配置错误、环境变量未同步、代理信任设置缺失这几个点上。

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