Question

我有一个在Azure网站上运行的WordPress网站，我正在尝试获取Azure CDN设置。我配置了端点和存储。所有文件都已上传。

我的问题是WOFF和TTF文件。 Chrome报告的状态为200 OK，但文件大小为0KB。 Firebug中的控制台揭示了CORS问题。字体肯定不起作用，因为我只是得到一个使用这些字体的块图标。

我有Azure CORS规则设置。这是一个快照...

Allowed origins: http://fonts.gstatic.com, http://cdn.devsoftsolutions.com
Allowed methods: Get, Head, Put
Allowed headers: x-ms-*
Exposed headers: x-ms-*
Max age (seconds): 200

这是我的web.config设置......

<staticContent>
      <remove fileExtension="svg" />
      <remove fileExtension="eot" />
      <remove fileExtension="woff" />
      <remove fileExtension="ttf" />
      <remove fileExtension=".svg" />
      <remove fileExtension=".eot" />
      <remove fileExtension=".woff" />
      <remove fileExtension=".ttf" />
      <mimeMap fileExtension=".svg" mimeType="image/svg+xml"  />
      <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
      <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
      <mimeMap fileExtension=".woff" mimeType="application/x-woff" />
      <mimeMap fileExtension=".woff" mimeType="application/octet-stream" />
      <mimeMap fileExtension=".ttf" mimeType="application/font-ttf" />
      <mimeMap fileExtension=".ttf" mimeType="application/vnd.ms-fontobject" />
</staticContent>

我正在努力解决此问题的网站是http://dev.devsoftsolutions.com

Answer 1

我想知道当你为每个扩展定义多个mimeMap时，你如何期望WOFF和TTF工作？！您如何期待IIS处理这个？！您应该只为每个扩展名定义一个mime映射（IIS采用最后定义的！）。您的正确配置应如下所示：

<staticContent>
  <remove fileExtension="svg" />
  <remove fileExtension="eot" />
  <remove fileExtension="woff" />
  <remove fileExtension="ttf" />
  <remove fileExtension=".svg" />
  <remove fileExtension=".eot" />
  <remove fileExtension=".woff" />
  <remove fileExtension=".ttf" />
  <mimeMap fileExtension=".svg" mimeType="image/svg+xml"  />
  <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
  <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
  <mimeMap fileExtension=".ttf" mimeType="application/vnd.ms-fontobject" />
</staticContent>

您可以随时咨询IANA on which are the correct mime types。在this demo site上，您将能够看到WOFF文件中的公文包图标。您可以使用浏览器调试工具或Fiddler来查看浏览器是否正确传输和解释了WOFF。

哦，还有另一个注意事项 - 您不需要为Google的字体启用CORS！只有当您想使用JavaScript发送数据或进行AJAX调用时才需要CORS！ Google字体使用简单的脚本src和CSS @url（）进入您的站点，不需要CORS。

我在Azure，CORS和WOFF地狱

1 个答案: