所以我有一個Azure Web服務(wù)和一個Azure CDN。我的網(wǎng)絡(luò)服務(wù)運行在ASP.Net核心上

我請求我網(wǎng)站的index.html，它開始從CDN下載資源。除了字體文件之外，所有的資源都會被加載。

錯誤如下:

CORS策略已阻止從源“https://web app . azure websites . net”訪問“https://cdn . azure edge . net/68 . 0 . 3/styles/ui-grid . woff”處的字體:請求的資源上不存在“Access-Control-Allow-Origin”標頭。因此，不允許對源“https://web app . azure websites . net”進行訪問。

下面是其中一個請求的樣子:

所以我理解的是:

從網(wǎng)絡(luò)服務(wù)器下載index.html index.html->下載。來自CDN的css 。css ->從CDN下載字體 被屏蔽？？好像是瀏覽器阻止了請求，而不是CDN，對嗎？如果是為什么？就因為是字體文件請求？ 如果使用Azure Blob存儲作為CDN端點的源，問題可能是存儲帳戶中的CORS配置。

我最初把我所有的域名放在一個單獨的行中，在允許的來源下，收到了和OP一樣的錯誤。 事實證明，您可以/必須將所有域(應(yīng)該具有相同的CORS配置)放在同一行上，用如下方式分隔:

在我的例子中，IIS塊。woff因為沒有設(shè)置mimeType，所以可以在web.config中設(shè)置它(如果需要，還可以選擇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>

沒有正確的配置，你不能從CDN中提取字體——這是一個不同的域，所以瀏覽器不能信任沒有正確標題的文件。

您只有一個選項-在CDN中正確設(shè)置標題。如果您可以訪問Apache或NGINX，您可以設(shè)置:

街頭流氓

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

NGINX

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

如果您無權(quán)訪問服務(wù)器設(shè)置，則不能使用CDN中的字體。

如果你使用Azure CDN的威瑞森高級SKU，你也可以通過CDN而不是原始服務(wù)器來設(shè)置CORS報頭。

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

我在嘗試從CDN后面的blob存儲帳戶提供字體文件時，甚至在本地運行時，都遇到了這個CORS錯誤。

字體文件的引用是來自同一Blob存儲帳戶提供的CSS文件的相對引用。

我的解決方案是使字體文件的引用成為blob存儲帳戶中(相同)url的絕對引用。這意味著Blob存儲帳戶可以正確應(yīng)用CORS策略(在Azure中Blob存儲帳戶上設(shè)置的)。