Next.js 使用 Vercel 阻止 CORS

Question

这不仅是一个问题，也是我费了好大劲才解决的问题的答案，我相信一些开发者会觉得它有用。

让我们从一些基本信息开始：

客户端应用正在使用 NextJs。
服务器应用正在使用通过 Vercel 服务部署的 NestJs。

在本地主机上一切正常，但在部署时请求总是被 CORS 阻止。

服务器应用程序部署配置 (vercel.json) 如下：

{
  "version": 2,
  "builds": [
    {
      "src": "src/main.ts",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "src/main.ts",
      "methods": [
        "GET",
        "POST",
        "PUT",
        "PATCH",
        "DELETE"
      ]
    }
  ]
}

在服务器应用程序中，我在 main.ts 文件中启用了 CORS：

app.enableCors({
    allowedHeaders: '*',
    origin: '*',
    credentials: true,
  });

使用我使用的任何客户端（NextJs、Angular 甚至 Insomnia 和 Postman）它表明 CORS 设置为接受任何来源，但它仍然阻止请求。

Answer 1

答案与 NextJs 或 NestJs 无关，仅与需要接受 OPTIONS 类型的 HTTP 请求的 vercel 部署配置有关，正确的 vercel.json 文件应如下所示：

{
  "version": 2,
  "builds": [
    {
      "src": "src/main.ts",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "src/main.ts",
      "methods": [
        "GET",
        "POST",
        "PUT",
        "PATCH",
        "OPTIONS",
        "DELETE"
      ]
    }
  ]
}

不幸的是，我在查看的任何文档中都没有找到此信息，它只是在 CORS 机制中使用了 OPTIONS 类型的 HTTP 请求后才出现的。

Next.js 使用 Vercel 阻止 CORS

Next.js CORS blocking using Vercel

nest

reactjs

next.js

vercel