■

作りかけのアプリをさくらサーバーに置いているのですが、久しぶりにhtmlファイルを開いてみたら、Font Awesomeから取得したアイコンが表示されなくなっていました💦

デベロッパーツールを確認してみました。

Access to fetch at 'https://ka-f.fontawesome.com/releases/v5.15.1/js/free-v4-shims.min.js' from origin 'http://browncobra29.sakura.ne.jp' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
↑
どうやら、この文章にエラーの原因が書かれているみたいです。

「オリジン 'http://browncobra29.sakura.ne.jp' から 'https://ka-f.fontawesome.com/releases/v5.15.1/js/free-v4-shims.min.js' へのフェッチへのアクセスは CORS ポリシーによってブロックされました。要求されたリソースには 'Access-Control-Allow-Origin' ヘッダーが存在しません。不透明な応答が必要な場合は、リクエストのモードを「no-cors」に設定して、CORS を無効にしてリソースをフェッチしてください。」
↑
和訳してみました。

CORSポリシーというのが、ポイントみたいです。

わからない単語
　フェッチ・CORS

フェッチ 【 fetch 】
　フェッチとは、取りに行く、取ってくる、持ってくる、連れてくる、来させる、呼び出す、引き出す、惹きつける、などの意味を持つ英単語。ITの分野では機器やプログラムなどが特定の場所からデータなどを読み出す動作のことを指すことが多い。
フェッチとは - IT用語辞典 e-Words

CORS
　どうやらアプリを置いているサーバーとは別のサーバーからデータを持ってくる仕組みをCORS(Cross-Origin-Resorce-Sharing オリジン間リソース共有)というみたいです。自分はほとんど知識がないので、前半は内容を理解できたけど後半はさっぱりわかりませんでした。
qiita.com

【どうやったら問題を解決できるか？】

　案①　アプリを格納しているサーバーに、FontAwesomeのフォントのデータを保存する

　案②　CORSを無効にする

①の方が簡単そうに思えるけど、できるだろうか・・・？