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.
- Enable access control on simple HTTP server
- How to fix error "Failed to load ressource : Acces-control-allow-origin cannot contain more than one origin"
- Error Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource
- CORS error using react and express after setting up cors in express
- CORS - localhost as allowed origin in production
- Angular HttpClient CORS Error With API Calls
- Angular proxy config not having any effect
- CORS issue when trying to upload a picture to image hosting service from react component
- React + Spring Boot: Getting CORS error while making get-request to server
- I want to detect in the client-side script that I have gotten a 401 error when fetching data with bad PAT (Using Azure DevOps REST API)
- Cors headers are set when run locally but not with traefik
- Amazon S3 CORS (Cross-Origin Resource Sharing) and Firefox cross-domain font loading
- React + PHP API throws CORS preflight error
- Django Rest Framework - Cross Origin Resquest got blocked
- ASP.NET Core 6 Web API : custom authentication handler and Angular HttpInterceptor [receive Status code =0 for 401 Unauthorized Response]
- ASP.NET Core - CORS error when posting the request despite allowing all origins
- Spring Boot enabling CORS by application.properties
- How to use CORS to implement JavaScript Google Places API request
- The 1inch api im calling is being blocked by a CORS access Control error, im totally lost after trying a few methods to fix the problem
- CloudFront is not correctly passing back the Access-Control-Allow-Origin header from S3
- TypeError: Failed to fetch, 400 error in network console, but not in exception
- Access-Control-Allow-Origin Multiple Origin Domains?
- CORS not working on Heroku but works locally with Node js
- Rails cors issue with JS files and URL rewrite
- Nodejs backend can't be reached from apk
- ASP.NET Core CORS Setup Stops Working After Bicep Deployment
- 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