Requested font files from Azure CDN being blocked by CORS policy

user_5732745 0
Viewed 8749

So I have an Azure Web Service and an Azure CDN. My web service is running on ASP.Net Core

I make a request for my Website's index.html, which starts downloading assets from the CDN. All the assets get loaded, except for the font files.

Here's the error:

Access to Font at 'https://CDN.azureedge.net/68.0.3/styles/ui-grid.woff' from origin 'https://WebApp.azurewebsites.net' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://WebApp.azurewebsites.net' is therefore not allowed access.

Here's what one of the requests looks like: enter image description here

So what I understand is:

  1. Download index.html from Web Server
  2. index.html -> download .css from CDN
  3. .css -> download font from CDN
  4. Blocked?? It seems like the browser is blocking the request, not the CDN, is that correct? If so why? Just because it's a font file request?
cdn azure fonts css asp.net
4 Answers

If using Azure Blob Storage as Origin for your CDN endpoint, the problem could be the CORS configuration in the Storage Account.

I initially had all my domains in a separate row under Allowed Origins and received the same errors as the OP. Turns out you can/must place all domains (that should have the same CORS configuration) on the same row, separated by , like this:

Storage Account CORS configuration

user_29158510
Related