Enabling CORS for website on Azure CDN to host fonts

Question

I have an Azure Website (Asp.net MVC) that includes fonts (font-awesome, glyphicons for example) and is availale at a custom domain, let's say www.mywebsite.com.

I have also setup an Azure CDN with the origin host pointing to the website (not to a blob storage). In addition, I'm using a custom domain name for the cdn, like "cdn.mywebsite.com".

The problem I'm having is that browsers are refusing to download the fonts because CORS is not enabled. I've found ways to enable CORS on Azure blob storage but I would really prefer to get this work just by pointing the CDN to the Website.

Any ideas on how this could be done?

Just curious - Why not use public CDN which hosts these fonts? e.g. maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css for font-awesome. — Gaurav Mantri
Because I'm using Glyphicons Pro which (I guess) isn't available in a public CDN as one is required to purchase a license. — Samuli Haverinen

Tomas Dolezal Tomas Dolezal · Accepted Answer · 2015-05-01T11:59:54

Assuming you have some basic CDN rewrite rules in your web.config system.webserver section, you may also add some outbound rules to enable CORS for CDN requests...

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

This outbound rule adds Access-Control-Allow-Origin: * response header to every request through Azure CDN that contains non empty Origin: request header.

Enabling CORS for website on Azure CDN to host fonts

1 Answers