NextJS cors 有错误的 'Access-Control-Allow-Origin' 值

Question

我在部署到 Netlify 后注意到一个问题，chrome 阻止了我对 public Apple api 的 ajax 请求，但它对我的朋友有效发送了一个 link 到.

现在反方向坏了。似乎 header 是我的 netlify url 而不是开发中的本地主机。

Access to fetch at 'https://itunes.apple.com/search?entity=podcast&term=test&limit=6' 
from origin 
'http://localhost:3001' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' 
header has a value 'https://effulgent-dingus-192e6.netlify.app' 
that is not equal to the supplied origin. Have the server send the header with a valid value, 
or, if an opaque response serves your needs, set the request's mode to 'no-cors' 
to fetch the resource with CORS disabled.

如何确保 Access-Control-Allow-Origin 未被缓存（或修复任何问题）。

Answer 1

要防止缓存，请在响应中包含 Vary: Origin header。

CORS and caching

Suppose the server sends a response with an Access-Control-Allow-Origin value with an explicit origin (rather than the "*" wildcard). In that case, the response should also include a Vary response header with the value Origin — to indicate to browsers that server responses can differ based on the value of the Origin request header.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin#cors_and_caching

Answer 2

我发现 NextJS 是运行服务器端和预期客户端的 API 调用。我将调用包装在一个检查中，以查看 window !== undefined 是否仅进行调用客户端。我想这已经解决了。

NextJS cors 有错误的 'Access-Control-Allow-Origin' 值

NextJS cors has wrong 'Access-Control-Allow-Origin' value

netlify

next.js

swr