I’m working a React client running within an Airtable Block (or Extension), making cross-origin requests to my server which returns signed URLs to CloudFront.

Most requests work perfectly, but intermittently (about 1 out of 200), some requests fail due to a CORS policy error involving the Access-Control-Allow-Origin header. Despite all requests being sent to the same server and endpoint, only a few fail, showing a mismatch in the CORS header.

Here is the typical request that fails:

GET https://www.serverurl.com/0eaba6aa5a2fa63be3a0d79ce66f9b64.wav.mp3

And the corresponding error from the fetch call:

Access to fetch at 'https://www.serverurl.com/0f7109b….wav.mp3' from origin 'https://devblock--p-k-iw-kh0-lrplu-e1--c8p70wf.alt.airtableblocks.com' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value 'https://block--p-k-iw-kh0-lrplu-e1--moq8mr8.alt.airtableblocks.com' 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.

What’s puzzling is that the CORS header reported in the error (Access-Control-Allow-Origin as https://block--p-k-iw-kh0-lrplu-e1--moq8mr8.alt.airtableblocks.com) doesn’t match what I see in the preflight response in the browser’s Network tab, where it correctly reflects the requesting origin.

Network tab

Has anyone encountered a similar issue or can suggest what might be causing this sporadic header mismatch?

I have verified that there are no redirects involved, purge all the cache on cloudflare and the server configuration has been double-checked to always provide the correct CORS headers. This issue seems to appear randomly.