fontawesomeでblocked by CORS policyエラーがでたとき

EC-CUBE

4.0.5

サーバーOS

Linux xserver.jp

DBサーバー

MySQL 10.5.11-MariaDB-log

WEBサーバー

Apache

PHP

7.4.13

現象

Chromeのデバッガーで『Access to CSS stylesheet at ‘https://use.fontawesome.com/releases/v5.3.1/css/all.css’ from origin ‘https://xxx.jp’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.』というエラーが出る。
で、当然のことながらアイコンが出ない。

解決

/xxx.jp/public_html/.htaccess

SetEnvIf Origin "^https?://(www\.)?(fontawesome.com)$" ORIGIN=$0
Header set Access-Control-Allow-Origin %{ORIGIN}e env=ORIGIN

参考

外部サイト設置のリソース読み込み時に、「Access to font at ‘https://〇〇〇〇.com/style.css’ from origin ‘https://localhost/’ has been blocked by CORS policy」エラーの対応方法