从 Azure CDN 请求的字体文件被 CORS 策略阻止

Posted 2023-03-03

【中文标题】从 Azure CDN 请求的字体文件被 CORS 策略阻止

【英文标题】：Requested font files from Azure CDN being blocked by CORS policy

【发布时间】：2018-02-23 21:07:58

【问题描述】：

所以我有一个 Azure Web 服务和一个 Azure CDN。我的 Web 服务在 ASP.Net Core 上运行

我请求我网站的 index.html，它开始从 CDN 下载资产。除字体文件外，所有资源都已加载。

这是错误：

从源“https://CDN.azureedge.net/68.0.3/styles/ui-grid.woff”访问字体https://WebApp.azurewebsites.net' 已被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许访问源“https://WebApp.azurewebsites.net”。

以下是其中一个请求的样子：

所以我的理解是：

从 Web 服务器下载 index.html index.html -> 从 CDN 下载 .css .css -> 从 CDN 下载字体 被阻止？？似乎浏览器阻止了请求，而不是 CDN，对吗？如果是，为什么？就因为它是一个字体文件请求？

【问题讨论】：

您阅读了吗：***.com/questions/33197751/… 或 ***.com/questions/25577981/… ？

看起来这些是针对 Amazon Simple Storage Service 的，我认为我无法访问 .htaccess，还是 Web 服务器文件不是 cdn 服务器文件？

【参考方案1】：

如果使用 Azure Blob 存储作为 CDN 端点的源，问题可能是 存储帐户 中的 CORS 配置。

我最初将所有域放在Allowed Origins 下的单独行中，并收到与 OP 相同的错误。 事实证明，您可以/必须将所有域（应该具有相同的 CORS 配置）放在同一行，用 , 分隔，如下所示：

【讨论】：

该字符串的长度是否有限制？

为了让它工作，我们还必须在标准规则引擎中创建一个规则来检查请求的 Origin 标头。 docs.microsoft.com/en-us/azure/cdn/cdn-cors

【参考方案2】：

在我的情况下，IIS 会阻止 .woff，因为未设置 mimeType，因此您可以在 web.config（如果需要，还可以选择 CORS）中设置它，如下所示：

    <?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <httpProtocol>
     <customHeaders>
       <add name="Access-Control-Allow-Origin" value="*" />
     </customHeaders>
    </httpProtocol>
   <staticContent>
        <remove fileExtension=".woff" /> <!-- In case IIS already has this mime type -->
        <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
        <remove fileExtension=".woff2" />
        <!-- In case IIS already has this mime type -->
        <mimeMap fileExtension=".woff2" mimeType="application/x-font-woff2" />    
    </staticContent>
  </system.webServer>
</configuration>

【参考方案3】：

如果没有正确的配置，您无法从 CDN 中提取字体 - 它是不同的域，因此浏览器无法信任没有正确标题的文件。

您只有一个选择 - 在 CDN 中正确设置标头。如果您可以访问 Apache 或 nginx，您可以设置：

阿帕奇

<FilesMatch ".(eot|ttf|otf|woff)">
    Header set Access-Control-Allow-Origin "*"
</FilesMatch>

NGINX

if ($filename ~* ^.*?\.(eot)|(ttf)|(woff)$)
    add_header Access-Control-Allow-Origin *;

如果您无权访问服务器设置，则无法使用 CDN 中的字体。

【参考方案4】：

如果您使用 Azure CDN 的 Verizon Premium SKU，您还可以通过 CDN 而不是源服务器设置 CORS 标头。

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