在Azure CDN上使用ttf字体文件时出现CORS错误

Question

我用Verizon Premium SKU创建了一个CDN。在字体方面，我收到“来自起源'https://myfqdn.com' 已被CORS策略阻止：请求的资源上不存在'Access-Control-Allow-Origin'标头”的消息。 然而，我已经按照这个文档https://learn.microsoft.com/en-us/azure/cdn/cdn-cors进行了操作，但是没有成功。 但是，如果我进入我的 https://cdn.myfqdn.com （是的，我有自定义域名和启用了https），页面加载没有任何问题。 这是我从上述文档中创建的规则的XML。

 <rules schema-version="2" rulesetversion="6" rulesetid="945266" xmlns="http://www.whitecdn.com/schemas/rules/2.0/rulesSchema.xsd">
  <rule id="1823263" platform="http-large" status="active" version="3" custid="A76A4">
    <!--Changed by userId: 952 on 02/25/2019 03:45:01 PM GMT-->
    <!--Changed by [e-mail] on 02/25/2019 03:25:23 PM GMT from IP: xxx.xxx.xxx.xxx-->
    <description>Wildcard</description>
    <!--If-->
    <match.request-header.wildcard name="Origin" result="match" value="Https://myFQDN.com" ignore-case="true">
      <feature.set-request-header action="set" key="Access-Control-Allow-Origin" value="*" />
      <feature.set-request-header action="set" key="Access-Control-Allow-Headers" value="*" />
      <feature.set-request-header action="set" key="Access-Control-Allow-Methods" value="GET, HEAD, OPTIONS" />
      <feature.set-request-header action="set" key="Access-Control-Expose-Headers" value="*" />
    </match.request-header.wildcard>
  </rule>
</rules>

感谢你的帮助。

- Christopher Radar San Souci

---

你找到什么了吗？ - Manwal

Answer 1

我在我的博客中也遇到了这个问题。除了字体和图标之外，所有文件都从CDN加载。我必须做两件事。一是允许Azure Web应用程序中的所有来源，另一件是通过编辑web.config来配置IIS中的文件。

只需登录到Azure门户，然后转到Azure Web应用程序。单击API下的CORS菜单，并将*作为允许的来源。

默认情况下，Azure App Service中的IIS不会提供扩展名为.woff2、.woff和.ttf的文件。这就是CORS问题的原因。我们将在system.webServer标签中添加这些配置，该标签是configuration标签的子标签。

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
     <staticContent>
      <mimeMap fileExtension="woff" mimeType="application/font-woff" />
      <mimeMap fileExtension="woff2" mimeType="application/font-woff2" />
      <mimeMap fileExtension=".ttf" mimeType="application/octet-stream" />
      <mimeMap fileExtension=".ttc" mimeType="application/octet-stream" />
      <mimeMap fileExtension=".otf" mimeType="application/octet-stream" />
    </staticContent>
  </system.webServer>
</configuration>

您还可以通过添加名为“启用静态Web字体”的扩展来实现此目的。我已经写了一篇详细的博客，您可以在这里阅读。

- Sibeesh Venu