来自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 '访问来自的字体已被CORS策略阻止https：// WebApp .azurewebsites.net '：请求的资源上没有“Access-Control-Allow-Origin”标头。因此，不允许来源“ https：// WebApp .azurewebsites.net ”。

以下是其中一个请求：

所以我理解的是：

1. 从Web Server下载index.html
2. index.html - ＆gt;从CDN下载.css
3. .css - ＆gt;从CDN下载字体
4. 阻止？似乎浏览器阻止了请求，而不是CDN，这是正确的吗？如果是这样的话？只是因为它是一个字体文件请求？

Answer 1

在我的情况下，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 2

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

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

的Apache

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

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

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

Answer 4

如果将Azure Blob存储用作CDN终结点的来源，则问题可能出在存储帐户中的CORS配置。

最初，我的所有域都位于Foo下的单独行中，并且收到与OP相同的错误。 事实证明，您可以/必须将所有域（应该具有相同的CORS配置）放在同一行中，并以@Service class MyService{ private final FooFactory fooFactory; @Autowired public MyService(FooFactory fooFactory){ this.fooFactory = fooFactory; } public void doSomething(){ // can of course be generated with a normal for loop too List<Foo> foos = IntStream.range(0, 10) .mapToObj(i -> fooFactory.create()) .collect(Collectors.toList()); // do something with 10 foo instances } } 分隔，如下所示：