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

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の場合）

以上で指定ドメインからのアクセスが許可されるようになりました。