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 16 · Answer 1 · answered Dec 17 '18 at 15:39

16

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,599
1
20
17

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://learn.microsoft.com/en-us/azure/cdn/cdn-cors – farreachchad Jun 16 '21 at 17:13
What do you mean by checking the Origin header @farreachchad? Can you show the rule you had to implement in order for it to work? – hmrc87 Mar 08 '23 at 18:45

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 3 · 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 2 · Answer 4 · answered Sep 15 '17 at 19:33

2

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://learn.microsoft.com/en-us/azure/cdn/cdn-cors

answered Sep 15 '17 at 19:33

Richard Li - MSFT

486
2
6

score 0 · Answer 5 · answered May 30 '23 at 14:19

I was getting this CORS error when trying to serve font files from a blob storage account behind a CDN, even when running locally.

The reference for the font files was a relative reference from a CSS file which was served from the same Blob Storage account.

My fix was to make the reference for the font files an absolute reference to the (same) url in the blob storage account. This meant that the Blob Storage account could apply the CORS policy (that was set in Azure on the Blob storage account) correctly.

Requested font files from Azure CDN being blocked by CORS policy

5 Answers5