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

Tomas Dolezal · Answer 1 · 2015-04-17T20:45:25.417

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.

score 1 · Answer 2 · answered Oct 06 '16 at 22:42

1

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.

answered Oct 06 '16 at 22:42

Richard Li - MSFT

486
2
6

From the [Help Center](http://stackoverflow.com/help/how-to-answer): Links to external resources are encouraged, but please add context around the link so your fellow users will have some idea what it is and why it’s there. Always quote the most relevant part of an important link, in case the target site is unreachable or goes permanently offline. – Adam Oct 06 '16 at 23:04

score 0 · Answer 3 · answered Sep 20 '16 at 23:36

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!

Azure Cloud Service CDN font CORS error

3 Answers3

Linked