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 *
めでたく解決しました。
Rｅgards for helping out, еxcellent info.
Wonderful beat ! I would like to apprentice at the same time as you amend your web site, how could i
subscribe for a blog website? The account aided
me a acceptable deal. I were a little bit familiar of this your broadcast provided brilliant clear idea
Hey there great blog! Does running a blog similar to
this require a great deal of work? I have very little expertise in computer
programming however I was hoping to start my own blog soon.
Anyways, should you have any ideas or tips for new blog owners please share.
I know this is off subject but I simply wanted to ask. Thanks!