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

CSSやJSファイル等、外部サイトに設置したファイルの読み込み

カートASPサービスや、マネージドなサーバーの場合、CSSファイルを自由に設置ができないサーバーを利用時に、外部管理のサーバーにファイルを設置し、読み込むケースがあります。

しかし、インターネットサイトを閲覧するためのソフトウェアであるブラウザ(Safari 、Google Chrome、Microsoft Edge等)は、ドメイン(choppydays.jp等のURL)の異なるサイトのリソースを読み込む場合やajaxアクセスをする場合、CORSエラーを発生させます。

「Access to font at ‘https://choppydays.com/style.css’ from origin ‘https://localhost/’ has been blocked by CORS policy」エラーの発生

異なるドメインのリソースにアクセスした際、下記のようなエラーが発生します。

Access to font at 'https://choppydays.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://choppydays.com/style.css」にアクセスした際、異なるドメイン(Cross-Origin)へのアクセスをブロックしたというエラーです。

(具体的には ドメインは https://choppydays.com 、オリジンはドメインにポート番号を含めた https://choppydays.com:443等)

.htaccess使用方法

クロスオリジンのリソースへのアクセスを許可する場合、.htaccessファイルをもちいた方法を下記に記載します。

.htaccessファイル設置場所

ドキュメントルートのディレクトリに設置します

$ cd /var/www/html/.htaccess

.htaccess記述方法

ここでは、2サイトからのリソースへのアクセス許可を行う記述を行います。

例)choppydays.com、および〇〇〇〇.jpからのCORSを許可

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

これでリソースへのアクセスが可能になります。

参考サイト

https://qiita.com/att55/items/2154a8aad8bf1409db2b

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA