CORS errors when using an Azure CDN with multiple origins
We have set up custom rules on the Azure CDN Standard endpoint to modify (overwrite) the response header based on the Origin of the request. In the rules defined, we are setting the Access-Control-Allow-Origin header value to the same value as that of the Origin of the request for all of the domains of the below-mentioned sites. 
We have multiple sites getting data served from the CDN URLs:
- A main content delivery environment
- A preview content delivery environment
We are seeing some CORS errors when accessing the sites and switching between the environments. These all seem to be related to .woff extension font files. This is an example error:
Access to font at 'https://cdn.example.com/example.woff' from origin 'https://sitename.com' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value 'https://sitename-preview.com' that is not equal to the supplied origin.
It is as if the rules set up for the CDN endpoint do not get acknowledged if you have already accessed a site from a different URL where you already requested assets from the CDN.
Microsoft has acknowledged that there is a problem in the multiple origin scenario here: https://learn.microsoft.com/en-us/azure/cdn/cdn-cors, but the proposed solution only caters to a single origin. If we add multiple origins to separate rules, then we still end up with the problem that occurs when the browser caches the Access-Control-Allow-Origin header for the first CORS origin.
Is there any workaround for this, other than to change the Access-Control-Allow-Origin header to * and put the CDN behind a WAF? I've read that the CORS spec is all or nothing here: Access-Control-Allow-Origin wildcard subdomains, ports and protocols, where the most upvoted answer states that it only supports *, null or the exact protocol + domain + port.
We worked around this issue by setting the Cache-Control property in the response header for .woff extension files to 'no-cache' within the Azure CDN endpoint caching rules.
- Nodejs backend can't be reached from apk
- ASP.NET Core CORS Setup Stops Working After Bicep Deployment
- ASP.NET Core 6 Web API : custom authentication handler and Angular HttpInterceptor [receive Status code =0 for 401 Unauthorized Response]
- Drawing new Image() onto canvas and using canvas.toDataURL()
- Failed to fetch. Possible Reasons: CORS Network Failure URL scheme must be "http" or "https" for CORS request
- Angular 18 CORS issue with Springboot as backend
- How can I enable CORS on Django REST Framework
- How do I fix CORS issue in Fetch API
- I try fetching my data on the server bisically this signup page, I got cors policy error even I got it configure on the server
- How do I resolve a CORS issue in an Ajax POST to ASP.NET Core 6.0 Web API?
- How does the 'Access-Control-Allow-Origin' header work?
- Cors and React with no local server
- Not able to install Microsoft.AspNet.WebApi.Cors from NuGet
- Understanding XMLHttpRequest over CORS (responseText)
- How to solve flutter web api cors error only with dart code?
- Private Network Access problem w/ disabled web security: Request had no target IP address space, yet the resource is in address space local
- SignalR errors in the console even though the requests successfully completed
- Origin header missing on API call outside of network using Azure
- CORS and x-apikey are mutual exclusive?
- Download image blob from Google Photos using JavaScript and REST API
- Origin null is not allowed by Access-Control-Allow-Origin
- How to Solve CORS error in accessing laravel routes
- Origin <origin> is not allowed by Access-Control-Allow-Origin
- Problem with CORS policy in React front end with FastAPI on the back trying to use Microsoft Single Sign-on
- Why the fetch gets failed even when I am using cors dependency?
- Firebase Storage and Access-Control-Allow-Origin
- Spring Boot Restful Service and CORS problem
- Background-image in CSS url blocked by Opaque Response Blocking
- Stripe Checkout example running into CORS error from localhost
- How to disable CORS policy for special routes in Node.js/Express server?