CODEWITHSUNDEEP
next.jsnetlifyswr
Ashbury
Ashbury

Reputation: 2346

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

I noticed an issue after deploying to Netlify, chrome was blocking my ajax requests to a public Apple api, but it was working for the friends I sent a link to.

Now it's broken in the opposite direction. It seems like the header is my netlify url rather than localhost in development.

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.

How can I make sure the Access-Control-Allow-Origin isn't cached (or fix whatever the problem is).

Upvotes: 0

Views: 2791

Answers (2)

Ashbury
Ashbury

Reputation: 2346

I found that NextJS was running the API call on the server side as well as the intended client side. I wrapped the call in a check to see if window !== undefined to do the call client side only. I think this has fixed it.

Upvotes: 1

Mark G
Mark G

Reputation: 2196

To prevent caching, include a Vary: Origin header in the response.

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

Upvotes: 0

Related Questions