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

Question

所以我有一个 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”。

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

所以我的理解是：

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

Answer 1

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

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

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

Answer 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 中的字体。

Answer 4

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

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