CSSやJSファイル等、外部サイトに設置したファイルの読み込み
コンテンツ
カートASPサービスや、マネージドなサーバーの場合、CSSファイルを自由に設置ができないサーバーを利用時に、外部管理のサーバーにファイルを設置し、読み込むケースがあります。
しかし、インターネットサイトを閲覧するためのソフトウェアであるブラウザ（Safari 、Google Chrome、Microsoft Edge等）は、ドメイン（choppydays.jp等のURL）の異なるサイトのリソースを読み込む場合やajaxアクセスをする場合、CORSエラーを発生させます。
「Access to font at ‘https://〇〇〇〇.com/style.css’ from origin ‘https://localhost/’ has been blocked by CORS policy」エラーの発生
異なるドメインのリソースにアクセスした際、下記のようなエラーが発生します。
Access to font at 'https://〇〇〇〇.com/style.css' from origin 'https://localhost/' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
これは、「https://localhost/」のサイトで「https://〇〇〇〇.com/style.css」にアクセスした際、異なるドメイン（Cross-Origin）へのアクセスをブロックしたというエラーです。
（具体的には ドメインは https://〇〇〇〇.com 、オリジンはドメインにポート番号を含めた https://〇〇〇〇.com:443等）
.htaccess使用方法
クロスオリジンのリソースへのアクセスを許可する場合、.htaccessファイルをもちいた方法を下記に記載します。
.htaccessファイル設置場所
ドキュメントルートのディレクトリに設置します
$ cd /var/www/html/.htaccess
.htaccess記述方法
ここでは、２サイトからのリソースへのアクセス許可を行う記述を行います。
例）△△△△.com、および〇〇〇〇.jpからのCORSを許可
SetEnvIf Origin "^https?://(www\.)?(△△△△.com|〇〇〇〇.jp)$" ORIGIN=$0
Header set Access-Control-Allow-Origin %{ORIGIN}e env=ORIGIN
これでリソースへのアクセスが可能になります。
参考サイト