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

Question

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

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

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

关于如何做到这一点有什么想法吗？

Answer 1

假设您的 web.configsystem.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: *通过包含非空Origin:请求标头的 Azure CDN 将响应标头添加到每个请求。