0

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).

Ashbury
  • 2,160
  • 3
  • 27
  • 52

2 Answers2

1

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.

Ashbury
  • 2,160
  • 3
  • 27
  • 52
0

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

Mark G
  • 1,868
  • 1
  • 6
  • 15
  • In this case though I'm requesting data from Apple's public API, so I don't have the ability to edit the response. – Ashbury Mar 27 '22 at 21:45