Font AwesomeやWebフォントが別サーバで表示されない問題の解決(クロスドメイン問題)

font awesomeって便利ですよね。ちょっとしたアイコンが手軽に使えて。でも、システム屋から見るとときに鬱陶しいことも。

とある、フロントのWebサーバと、システム遷移後のシステムサーバが別になっているシステムにて。
「フロントでは表示されているFont awesomeのアイコンが、システムページでは壊れている」

他のCSSはちゃんと参照できているのに、Font AwesomeやWeb fontが軒並み読み込まれていない。

Googleで「Font awesome 表示されない」などで検索すると、判で押したように以下のような対策が提示される。

広告

  • CSSがheaderに読み込まれていない
  • Free版ではなくPro版を指定してしまっている
  • font-familyに「Font Awesome 5 free」と設定していない
  • font-weightを指定していない
  • contentのユニコードにバックスラッシュをつけていない

多分、一般的なFont awesomeを使いたいシーンとしては上記であっているんでしょうけど、どれもフロントサーバでは実現されているので…。

あ、サーバが別だからだめなのか?と気づいて色々試した結果、次のことがわかった。

「最近のブラウザでは、ドメインが違うところからWeb Fontを読み込めないようになっている」

これを、Webフォントのクロスドメイン問題という。

解決するには、読み込まれる側のWebサーバに許可設定を仕込めばOK。

例として、webserver.com に配置したWebフォントを、systemserver.comから読み出すとして。

webserver.comのサーバの /etc/httpd/conf.d/ssl.conf に

Header set Access-Control-Allow-Origin “systemserver.com”

と記載してhttp reload。.htaccessでも大丈夫。

もし、どっからでも許可するぜウェルカム!って場合は、ドメイン部分をアスタリスクにすれば良い。

Header set Access-Control-Allow-Origin *

めでたく解決しました。

About: adminuser


Leave a Reply

Your email address will not be published. Required fields are marked *