Enabling CORS for the Azure CDN Font Site

Question

I have an Azure Website (Asp.net MVC) that includes fonts (e.g. fonts, glyphics) and is available in a user domain, say www.mywebsite.com.

I also installed Azure CDN with the source host pointing to the site (and not the blob repository). In addition, I use my own domain name for cdn, for example, "cdn.mywebsite.com".

The problem I am facing is that browsers refuse to download fonts because CORS is not enabled. I found ways to enable CORS in the Blade Azure repository, but I would rather get this working just by pointing the CDN to the website.

Any ideas on how to do this?

Answer 1

Assuming you have some basic rules for rewriting a CDN in the web.config section system.webserver, you can also add some outgoing message rules to enable CORS requests for a CDN ...

<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 a response header Access-Control-Allow-Origin: *to each request through an Azure CDN that contains a non-empty Origin:request header.