Vercel 缓存多个域的 CORS 标头问题

Question

我在 Vercel 上部署了 Next.js API。 该 API 被多个其他域使用。

当浏览器发送

If-None-Match

标头时，Vercel 可以回复 304；但是，

Access-Control-Allow-Origin

标头可能包含不同的来源，这会导致 CORS 错误。我猜这是因为 Vercel 从缓存的响应中发送标头。

如何确保在

Access-Control-Allow-Origin

标头中指定正确的原始值？ 我认为我可以为使用 API 的每个域添加一些代理，但我宁愿避免这种情况。

Answer 1

据我了解，问题在于 Vercel 未在缓存键中包含请求的来源，并且您会意外遭遇 Web 缓存中毒。不幸的是，Vercel 似乎还不允许自定义缓存键。

长期解决方案是向 Vercel 施加压力，要求他们将来源添加到缓存键中；这是其他 CDN（例如 Cloudflare）已采用的明智默认设置。另一种短期解决方案是根据 Vercel 缓存规则:

使对 CORS 请求的响应不可缓存

{
  "name": "foo",
  "version": 2,
  "routes": [
    {
      "src": "/whatever",
      "headers": [
        { key: "Cache-Control", value: "no-cache" },
        ...
      ]
    }
  ],
  ...
}