Content blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin'
Category: azure cdn
BusinessClouds on Sun, 25 Sep 2016 12:05:39
We have a publicly accessible server where we uploaded some fonts to use on our website. We are accessing the font URLs over https.
Now we would like to use Azure CDN for accessing the fonts. For this, we have created a standard Verizon CDN profile with one endpoint.
When we access the font URL from browser with endpoint, its working fine. But when we try to access it via python code form another server using the same endpoint, we are getting following error :
Font from origin 'https://<endpoint>.azureedge.net' has been blocked from loading by Cross-Origin Resource Sharing
policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://<our-domain>' is therefore not allowed access.
Can you please help us to fix this issue?
Richard Li - MSFT on Mon, 26 Sep 2016 21:37:04
You will need to make sure your font server is sending a Access-Control-Allow-Origin header with either * or the domain of the server you are requesting it from.
Please see our full documentation for more details https://azure.microsoft.com/en-us/documentation/articles/cdn-cors/
Hope that helps, and feel free to reach out again if you continue having issues.
BusinessClouds on Tue, 27 Sep 2016 07:33:49
Thanks for your reply.
Its working fine with our own font server (We have added Access-Control-Allow-Origin "*" on apache config)
But when we use the origin as github.com , its not working . We are getting the error message as
Redirect at origin 'https://cdn.azureedge.net' has been blocked from loading by Cross-Origin Resource Sharing policy: The 'Access-Control-Allow-Origin' header has a value 'https://render.githubusercontent.com' that is not equal to the supplied origin. Origin 'https://<our domain> is therefore not allowed access.
Is it possible to fix from our side ?
Anton Kucer - MSFT on Tue, 27 Sep 2016 07:49:54
What do you mean by "use the origin as github.com"? Is the CDN endpoint pointing to a github.com domain? Sample URL from client illustrating issue along with response headers you get back would be very helpful for helping you resolve this issue.
BusinessClouds on Tue, 27 Sep 2016 11:31:29
Yes, the CDN endpoint points to "github.com"
Can we do anything from Azure CDN to get this fixed?
Richard Li - MSFT on Tue, 27 Sep 2016 17:43:26
Providing the headers from the response/request would help us understand better.
As I understand it, you're trying to do a CORS request to github.com which just has a single origin in the access control origins. If you're not able to In that case you can use the Rules Engine in Verizon to add the correct access control headers.
See the Verizon Premium examples from https://azure.microsoft.com/en-us/documentation/articles/cdn-cors/#multiple-origin-scenarios to correctly set up your matches and rules. You'll find two options there: Using a regex match, or using a request header match for each origin you want allowed.
BusinessClouds on Wed, 28 Sep 2016 12:01:53
Thanks for your reply.
To make things easier, we are planning to use azure storage as Origin
Here are the things we tried :
1) Created a container on one of our storage account and uploaded the fonts to that container as Blob (say, abc)
2) The direct URL for Blob is working fine. https://<storage_account>.blob.core.windows.net/abc/font1.ttf
3) Then we have created Verizon Premium CDN profile, created an endpoint (say, cdn.azureedge.net) with origin as storage.
4) Also we have added Rules on Rules Engine.
5) When we access the CDN URL, https://cdn.azureedge.net/abc/font1.tt is working fine. But when we try with code, getting the following error
https://cdn.azureedge.net' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://<our-domain>' is therefore not allowed access.
Please help us to fix this.
Richard Li - MSFT on Thu, 29 Sep 2016 23:09:06
If the final goal is to use storage as origin and allow access to everyone, theres no need to use the rules engine. You can simply set the header on the blob itself to *.
Regarding your rule, there could be a couple things. The rule takes a while to take effect (2 hrs sometimes). Can you share your CDN URL so I may test?
BusinessClouds on Sun, 02 Oct 2016 10:21:46
I enabled CORS on storage blob and the issue fixed for me. Now the CDN works fine.