CORSポリシーでブロックされているAzure CDNのフォントファイル

Question

私はAzure WebサービスとAzure CDNを持っています。私のWebサービスがASP.Netコアで動作しています

私はCDNからアセットのダウンロードを開始するWebサイトのindex.htmlをリクエストします。フォントファイルを除き、すべてのアセットがロードされます。ここで

は誤りです：

Access to Font at 'https://CDN.azureedge.net/68.0.3/styles/ui-grid.woff' from origin 'https://WebApp.azurewebsites.net' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://WebApp.azurewebsites.net' is therefore not allowed access.

は、ここでの要求の一つは次のようになります。

それでは、私が理解することです：Webサーバーから

1. ダウンロードindex.htmlを
2. index.html - > CDNからのダウンロード.css
3. .css - > CDNからフォントをダウンロード
4. ブロックされていますか？ブラウザがリクエストをブロックしているようですが、CDNではなく、正しいのでしょうか？もしそうなら、なぜですか？ちょうどそれがフォントファイルの要求だからですか？

Answer 1

適切な設定がないと、フォントをCDNからプルすることはできません。別のドメインであるため、ブラウザは適切なヘッダーがないとこのファイルを信頼できません。

CDNには適切なヘッダーを1つだけ設定できます。あなたは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 2

Azure CDNのVerizon Premium SKUを使用している場合は、オリジンサーバーではなくCDN経由でCORSヘッダーを設定することもできます。

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