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:

Download index.html from Web Server
index.html -> download .css from CDN
.css -> download font from CDN
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?

Did you read: https://stackoverflow.com/questions/33197751/fonts-are-blocked-in-web-client-cors or https://stackoverflow.com/questions/25577981/font-from-origin-has-been-blocked-from-loading-by-cross-origin-resource-sharing ? — kris_IV, Sep 14 '17 at 19:16
It looks like those are for Amazon Simple Storage Service, I don't think I have access to .htaccess, or is that a web server file not a cdn server file? — Hugh Myron, Sep 14 '17 at 21:41

score 15 · Answer 1 · answered Dec 17 '18 at 15:39

15

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:

answered Dec 17 '18 at 15:39

veuncent

1,369
1
16
16

1

Is there a limit to how long that string can be? – Steve L. Feb 18 '21 at 15:37
2

To get it to work we also had to create a rule in the Standard rules engine to check the Origin header on the request. https://docs.microsoft.com/en-us/azure/cdn/cdn-cors – farreachchad Jun 16 '21 at 17:13

score 5 · Answer 2 · answered Mar 28 '18 at 06:54

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>

score 2 · Answer 3 · answered Sep 15 '17 at 12:03

You can't pull fonts from CDN without proper config - it's a different domain, so browser can't trust this files without proper headers.

You have only one option - set properly header in CDN. If you have access to Apache or NGINX you can set:

Apache

<FilesMatch ".(eot|ttf|otf|woff)">
    Header set Access-Control-Allow-Origin "*"
</FilesMatch>

NGINX

if ($filename ~* ^.*?\.(eot)|(ttf)|(woff)$){
    add_header Access-Control-Allow-Origin *;
}

If you don't have access to server settings you can't use fonts from CDN.

score 1 · Answer 4 · answered Sep 15 '17 at 19:33

1

If you are using the Verizon Premium SKU of Azure CDN, you can also set the CORS headers via the CDN instead of the origin server.

https://docs.microsoft.com/en-us/azure/cdn/cdn-cors

answered Sep 15 '17 at 19:33

Richard Li - MSFT

466
2
6

Requested font files from Azure CDN being blocked by CORS policy

4 Answers4