Azure 云服务 CDN 字体 CORS 错误

Question

我一直在按照这个教程启用Azure CDN云服务：链接。我将我的打包和缩小代码与CDN集成，一切都运行良好，但是我的网站无法获取字体，出现了以下错误：

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.

我试图寻找解决方案，于是将以下内容添加到我的Web.config文件中：

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

但是这并没有帮助，我还发现了一些类似于这样的问题和答案：链接，但是这只有在你使用CDN + Blob存储时才有用（我没有使用）。

我该如何解决这个问题？

编辑：

我从捆绑包中删除了字体，并将它们链接到了没有CDN的地方，这解决了问题，但这并不完全是解决这个问题的方法。

- hyperN

Answer 1

这个Azure CDN的重写配置对我有用，...

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

对于每一个以 cdn/ 开头的请求，Azure CDN 会在响应中添加 Access-Control-Allow-Origin: * http 头，只要该请求中存在非空的 Origin: http 头。

- Tomas Dolezal

Answer 2

在Azure CDN中，您可以在Verizon Premium配置文件上设置规则以启用CORS。回答这个问题是为了帮助其他寻找解决方案的人。

https://azure.microsoft.com/en-us/documentation/articles/cdn-cors/

这还将使您能够指定允许访问的域名的显式列表，而不仅仅是通配符。

- Richard Li - MSFT

---

从帮助中心：鼓励添加外部资源链接，但请在链接周围添加上下文，以便您的同行用户了解它是什么以及为什么存在。始终引用重要链接的最相关部分，以防目标站点无法访问或永久离线。 - Adam

Answer 3

当我使用Azure Web应用程序作为源创建Azure CDN时，遇到了同样的问题。

最终，我采用了与您类似的解决方法。

我将@font-face声明的src属性替换为使用Google字体CDN。虽然这不是每个人都可以选择的选项，但对我来说起作用了。

@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;
}

在这里查看 Google 提供的所有字体：https://fonts.google.com/

希望对某些人有所帮助！

- Cossens