CORS エラーが出たときの対処法

No 'Access-Control-Allow-Origin' header is present on the requested resource. が出たときの対処法

font-awesome の呼び出し時、上記のエラーが出てフォントが表示されませんでした。今回はこの対処方をご紹介します。

エラーの再現

"https://www.rectus.co.jp" (本 HP) から "https://www.rectus.org" 配下にある font-awesome の CSS を呼び出します。

この要素の after に font-awesome を設定

after に color: red を指定してあります。フォントが正しく表示されず、四角になってしまっています。

エラーの原因

エラーを直訳すると、「リクエストされたリソースのヘッダーに 'Access-Control-Allow-Origin' がありません」となります。このエラーは CORS エラーと呼ばれるエラーで、クロスオリジン (HP が 2 つ以上のオリジン(プロトコル + ドメイン + ポート番号) によって構成されている状態) によるエラーです。つまり、本来であれば 1 つのオリジンで構成されているはずの HP が 2 つ以上のオリジンで構成されているので、2 つ目以降のオリジンは本来のオリジンとは違うために拒否されてしまっている状態です。"https://www.rectus.co.jp" 配下に CSS を置ければ気にする必要はないのですが、置けない場合はヘッダーに 2 つ目以降のオリジンを許可する記述、'Access-Control-Allow-Origin' を追加すれば解決することができます。

解決方法

.htaccess に以下を追加します。

<IfModule mod_headers.c>
# アクセスを許可する URL を指定
Header set Access-Control-Allow-Origin "https://www.rectus.org" # URL はご自身の環境によって変更すること
# 許可するリクエストヘッダの種類を指定
Header set Access-Control-Allow-Headers "Content-Type"
</IfModule>