为 Azure CDN 上的网站启用 CORS 以托管字体答案

【问题标题】：Enabling CORS for website on Azure CDN to host fonts为 Azure CDN 上的网站启用 CORS 以托管字体
【发布时间】：2015-05-01 19:59:54
【问题描述】：

我有一个 Azure 网站 (Asp.net MVC)，其中包含字体（例如 font-awesome、glyphicons）并且可以在自定义域中使用，比如 www.mywebsite.com。

我还设置了一个 Azure CDN，其源主机指向网站（而不是 Blob 存储）。此外，我为 cdn 使用了自定义域名，例如“cdn.mywebsite.com”。

我遇到的问题是浏览器拒绝下载字体，因为未启用 CORS。我已经找到了在 Azure blob 存储上启用 CORS 的方法，但我真的更希望通过将 CDN 指向网站来完成这项工作。

关于如何做到这一点的任何想法？

【问题讨论】：

只是好奇 - 为什么不使用托管这些字体的公共 CDN？例如maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css for font-awesome。
因为我使用的是 Glyphicons Pro，它（我猜）在公共 CDN 中不可用，因为需要购买许可证。

标签： asp.net asp.net-mvc azure fonts cdn

【解决方案1】：

假设您的 web.config system.webserver 部分中有一些基本的 CDN 重写规则，您还可以添加一些出站规则来为 CDN 请求启用 CORS...

<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>

此出站规则将 Access-Control-Allow-Origin: * 响应标头添加到通过 Azure CDN 包含非空 Origin: 请求标头的每个请求。

【讨论】：