Azure Cloud Service CDN font CORS error

Question

I've been following this tutorial for enabling Azure CDN for Cloud Services: link . And I integrated my bundling and minification with CDN and everything works fine except my site cannot fetch fonts, I'm getting this error:

Font from origin 'http://azurecdn.vo.msecnd.net' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http:// mysite.com' is therefore not allowed access.

I tired to find solution from my problem and added these lines to my Web.config file:

  <httpProtocol>
  <customHeaders>
    <add name="access-control-allow-origin" value="*" />
    <add name="access-control-allow-headers" value="content-type" />
  </customHeaders>
</httpProtocol>
   <rewrite>
  <outboundRules>
    <rule name="Set Access-Control-Allow-Origin header">
      <match serverVariable="RESPONSE_Access-Control-Allow-Origin" pattern="(.*)" />
      <action type="Rewrite" value="*" />
    </rule>
  </outboundRules>
  <rules>

    <rule name="RewriteIncomingCdnRequest" stopProcessing="true">
      <match url="^cdn/(.*)$"/>
      <action type="Rewrite" url="{R:1}"/>
    </rule>
  </rules>
</rewrite>

But that didn't help, also I found questions & answers such as this: link , but this helps only if you're using CDN + Blob storage (which I'm not using)

How can I solve this ?

EDIT

I removed fonts from my bundle and linked them without CDN and that did the trick, but that isn't exactly solution to this problem

Answer 1

This rewrite configuration for Azure CDN is working for me...

<rewrite>
    <outboundRules>
        <rule name="Set Access Control Allow Origin Header" preCondition="Origin header">
            <match serverVariable="RESPONSE_Access-Control-Allow-Origin" pattern="(.*)" />
            <action type="Rewrite" value="*" />
        </rule>
        <preConditions>
            <preCondition name="Origin header" logicalGrouping="MatchAll">
                <add input="{HTTP_ORIGIN}" pattern="(.+)" />
                <add input="{HTTP_X_ORIGINAL_URL}" pattern="^/cdn/(.*)$" />
            </preCondition>
        </preConditions>
    </outboundRules>
    <rules>
        <rule name="Rewrite CDN requests" stopProcessing="true">
            <match url="^cdn/(.*)$" />
            <action type="Rewrite" url="{R:1}" />
        </rule>
    </rules>
</rewrite>

For every request from Azure CDN (url starting with cdn/ ) containing non empty Origin: http header it adds Access-Control-Allow-Origin: * http header to response.

Answer 2

Answering this in case it helps other people looking for a solution. In Azure CDN, you can set rules on the Verizon Premium profile to enable CORS as well.

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

This will also allow you to specify an explicit list of domains allowed access instead of just a wildcard.

Answer 3

I had the same issue when creating an Azure CDN with my Azure web app as the origin.

In the end I used a similar workaround to you.

I replaced the src attribute of my @font-face declarations to use the google fonts cdn. Not always an option for everyone but it worked for me.

 @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v15/NdF9MtnOpLzo-noMoG0miPesZW2xOQ-xsNqO47m55DA.woff2) format('woff2'); unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB; } 

Check out all the fonts google have available here: https://fonts.google.com/

Hope this helps someone!