我在 Azure、CORS 和 WOFF 地狱答案

【问题标题】：I'm in Azure, CORS, and WOFF hell我在 Azure、CORS 和 WOFF 地狱
【发布时间】：2014-12-01 04:16:50
【问题描述】：

我有一个在 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

【问题讨论】：

标签： wordpress azure truetype woff azure-cdn

【解决方案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。

【讨论】：