Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

BootstrapのGlyphiconsが表示されない対処法(クロスオリジンリクエスト)

More than 3 years have passed since last update.

Bootstrapでフォントを使ったアイコンを出せるGlyphiconsですが、Xになって表示されない事がありました。

ChromeのDeveloper Toolで確認するとコンソールにエラーが出ています。

Font from origin 'https://aaaaaa.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://bbbbbb.com' is therefore not allowed access.

ちなみにFirefoxのエラーは
クロスオリジンリクエストをブロック: 同一生成元ポリシーにより、https://aaaaaa.com/fonts/glyphicons-halflings-regular.woff にあるリモートリソースの読み込みを拒否します。リソースを同一ドメインに移動するか、CORS を有効にすると解決できます。

これはクロスドメインからのアクセスができないというエラーです。
その場合の対処方法はクロスドメインからのアクセス許可をする必要があります。

.htaccessに設定する(自サーバーの場合)


fontsディレクトリが置いてあるディレクトリに下記記述した.htaccessを設置してください。
<FilesMatch "\.(ttf|otf|eot|woff)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

Cloudfront・S3の場合


弊社はcloudfrontを使っていたため、上記の.htaccessによる設定ができません。
その場合はs3のCORS Configurationを設定する必要があります。

  1. 該当のS3のバケットを選択

  2. Propatiesを開く

  3. Permissionを選択

  4. Edit CORS Configurationを以下のような設定にします。
    <CORSConfiguration>
        <CORSRule>
            <AllowedOrigin></AllowedOrigin>
            <AllowedMethod>GET</AllowedMethod>
            <MaxAgeSeconds>3000</MaxAgeSeconds>
            <AllowedHeader>Authorization</AllowedHeader>
        </CORSRule>
    </CORSConfiguration>

    ただ弊社は固定のドメインからのアクセスだったので、 <AllowedOrigin>.example.com</AllowedOrigin>のようにドメイン指定しました。

  5. Cloudfront側でinvalidationsを実行してキャッシュをクリアしていきます。(Cloudfrontの場合)


以上で指定ドメインからのアクセスが許可されるようになりました。
eversense
家族を幸せにすることで、笑顔溢れる社会をつくる。
https://eversense.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away