Requested font files from Azure CDN being blocked by CORS policy

Question

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:

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?

Answer 1

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:

Answer 2

In my case, IIS blocks .woff since mimeType is not set, hence you can set that in web.config (and optionally CORS if required) as follows:

    <?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <httpProtocol>
     <customHeaders>
       <add name="Access-Control-Allow-Origin" value="*" />
     </customHeaders>
    </httpProtocol>
   <staticContent>
        <remove fileExtension=".woff" /> <!-- In case IIS already has this mime type -->
        <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
        <remove fileExtension=".woff2" />
        <!-- In case IIS already has this mime type -->
        <mimeMap fileExtension=".woff2" mimeType="application/x-font-woff2" />    
    </staticContent>
  </system.webServer>
</configuration>