如何启用 CORS 在 vercel 上不起作用？

Question

我已经用nodeJS和Express构建了api服务器

然后我使用 CORS 包启用了 CORS

import cors from "cors";
const app = express();
app.use(
  cors({
    origin: "*",
  })
);

维塞尔配置：

import cors from "cors";
const app = express();
app.use(
  cors({
    origin: "*",
  })
);

但是，我在访问vercel上的API服务器时总是出现CORS错误。

Access to XMLHttpRequest at 'https://apiurl/' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

---

我正在本地测试并设置启用 CORS。上面的代码片段有问题。

请指出这里有什么问题。

谢谢

Answer 1

我知道我正在回答一篇很旧的帖子，但我自己在两天的大部分时间里都在与这个问题作斗争，所以如果其他人偶然发现了这个，我希望它能有所帮助..为我解决这个问题的是vercel.json 中的以下内容：

更改自：

{
  "version": 2,
  "builds": [
    {
      "src": "./index.js",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "./index.js"
    }
  ]
}

到：

{
  "version": 2,
  "builds": [
    {
      "src": "./index.js",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "./index.js",
      "methods": ["GET", "POST", "PUT", "DELETE", "PATCH", "OPTIONS"],
      "headers": {
        "Access-Control-Allow-Origin": "*"
      }
    }
  ]
}

结果 vercel 会覆盖您放在 json 之外任何位置的 cors 设置。不可能在同一文件中混合标头数组和路由数组。但您可以在路由中添加标头。不要忘记方法，特别是选项，因为它显然将许多请求转换为选项请求。

Answer 2

将其添加到您的 Vercel 配置中：

{
  "headers": [
    {
      "source": "/api/(.*)",
      "headers": [
        { "key": "Access-Control-Allow-Credentials", "value": "true" },
        { "key": "Access-Control-Allow-Origin", "value": "*" },
        { "key": "Access-Control-Allow-Methods", "value": "GET,OPTIONS,PATCH,DELETE,POST,PUT" },
        { "key": "Access-Control-Allow-Headers", "value": "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version" }
      ]
    }
  ]
}