クロスオリジンリソース共有ポリシーによってフォントのロードがブロックされました: 'Access-Control-Allow-Origin'なし


16

Google Chromeでこのエラーが発生しています。すべてが正しくセットアップされていると思いました。しかし、そうではないでしょうか?

http://skin.cdn.comクロスオリジンリソース共有ポリシーにより、オリジンからのフォントのロードがブロックされました:要求されたリソースに「Access-Control-Allow-Origin」ヘッダーがありません。http://domain2.comしたがって、Origin はアクセスを許可されていません。

そして、htaccess(ドメインのルート)に次のものがあります。

<IfModule mod_headers.c>    
Header add Access-Control-Allow-Origin "http://skin.cdn.com" 
</IfModule>

質問:他の設定を忘れましたか?

どうもありがとう

回答:


17

ウェブサイトのルートディレクトリでhtaccessファイルのコードを変更します(つまり、public_html ".htaccess"ファイル)

<FilesMatch "\.(ttf|otf|eot|woff|woff2)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "http://skin.cdn.com"
    </IfModule>
</FilesMatch>

これで、CDNは、リソース(フォント)を渡すリソースとしてそれらを呼び出すリソースをロードできるようになります。

警告:ファイルが数分で更新されるように、CDNですべてをパージする必要があります。


1
あなたの答えは私にとって完璧に機能しましたが、ワイルドカードを特定の起源に限定するのではなく、ワイルドカードを選んだ理由を尋ねることはできますか?
アングラハム

この方法はまだ機能しています。
ラーフル

0

@Prashant Tapaseの答えにコメントするほどの評判はありませんが、ルートディレクトリはPublic_htmlではありません。これは、ルートディレクトリのサブディレクトリです。&私が調査している回答からFileMatchディレクティブはIfModule内にある必要があります

<IfModule mod_headers.c>
    <FilesMatch "\.(eot|otf|ttc|ttf|woff|woff2)$">
        Header set Access-Control-Allow-Origin "*"
    </FilesMatch>
</IfModule>

これが間違っている場合は修正してください。
または、彼が言及したように、フォントの特定のURL / URIを指定できます。

また、CDNの場合は、可能であればhttpではなくhttpsバージョンを使用する必要があります。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.