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!
Your style is really unique compared to other people I have read stuff from.
I appreciate you for posting when you’ve got the opportunity,
Guess I’ll just bookmark this site.
Greetings! Very useful advice in this particular post!
It’s the little changes that will make the greatest changes.
Thanks for sharing!
Hi there, i read your blog from time to time and i own a similar one and i was just curious if you get a lot of spam remarks?
If so how do you stop it, any plugin or anything you
can suggest? I get so much lately it’s driving me crazy so any help is very much appreciated.
It’s hard to find experienced people on this topic, however,
you sound like you know what you’re talking about!
Thanks
Saved as a favorite, I really like your website!
Having read this I believed it was very enlightening. I appreciate you
spending some time and energy to put this content together.
I once again find myself personally spending way too much time both reading and
leaving comments. But so what, it was still worth it!
Great blog here! Also your website quite a bit up
very fast! What web host are you the use of? Can I am getting your affiliate hyperlink to your
host? I want my web site loaded up as fast as yours lol.