从 Azure CDN 请求的字体文件被 CORS 策略阻止

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>

Answer 3

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.

Answer 4

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