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

Question

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

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

这是错误：

访问字体的' https：//开头CDN .azureedge.net / 68.0.3 /风格/ UI-grid.woff '从原点' https：//开头的WebApp .azurewebsites.net '已被封锁的CORS政策：否“访问-Control-Allow-Origin' 标头存在于请求的资源上。因此，不允许访问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

就我而言，由于未设置 mimeType，IIS 会阻止 .woff，因此您可以在 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 中的字体。