【HTML・CSS】Access-Control-Allow-Originエラーの解決方法

2022.06.27

ローカルでサイトを制作し、サーバにサイトをアップしてみたらデザインが崩れていました。Chromeの開発者ツールでエラーを確認すると、使用していたBootstrapやらFont Awesomeなどに全て以下のようなエラーが出ていました。

Access to font at ‘〇〇（使用していたBootstrapやらFont AwesomeのURL）’ from origin ‘〇〇（サイトURL）’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

調べてみるとCORSエラーというようです。

今回はサイトURLに…
・wwwあり▶エラー
・wwwなし▶エラーなし
のようでした。

こちら（jqueryでのCORSエラー）の説明では、

「CORS（Cross-Origin Resource Sharing）は、異なるドメイン名であるにもかかわらず、あるサイトが別のサイトのリソースにアクセスできるようにするHTML5機能です。」
とあるので、今回の場合は、「wwwあり」が「wwwなし」からBootstrapやFont Awesomeにアクセスしようとしてエラーが出たのかな？と推測します（間違ってるかもしれませんが）。

解決方法その1：どのアドレスからでもアクセス可能にする

HTML内のヘッダーの一番上にこれを追加するだけです。

PHP

<? php header("Access-Control-Allow-Origin: *"); ?>

アップしてしばらくすると（5分ぐらい）反映されます。

解決方法その2：URLを正規化する

今回はwwwの有無でエラーになったので.htaccessを使用してサイトURLをwwwあり/なしで統一して解決する方法も良いと思います（SEO的にも良いはず）。
サーバ内の一番上のフォルダに.htaccessというファイルがあるのでそれを編集します。※このファイルは重要なので、いつでも戻れるようにバックアップを取っておいてください。

.htaccessに以下を記述します。

wwwありにしたい場合

.htaccess

RewriteEngine on
RewriteCond %{HTTP_HOST} !^www\.
RewriteRule ^(.*)$ https://www.%{HTTP_HOST}/$1 [R=301,L]

wwwなしにしたい場合

.htaccess

RewriteEngine on
RewriteCond %{HTTP_HOST} ^www\.(.*)$
RewriteRule ^(.*)$ https://%1/$1 [R=301,L]
※どちらもアドレスをいじらずにそのままコピペでOKです。

WordPressを使用したサイトの場合

WPを使用したサイトの場合、元々.htaccessに以下のような文章が入っていると思います。

# BEGIN WordPress
〜〜〜中略〜〜〜
# END WordPress

先程の記述を #BEGIN WordPress の上に追加してください。
WPはダッシュボード▶設定▶一般からサイトのURLを指定する所があるので、そちらも合わせて確認してもらえると良いと思います。

記述したら.htaccessをアップし、サイトを確認してみてください。
URLの前にwwwあり/なしでアクセスしてみて、自分の指定した方にリダイレクトされれば成功です。

タグ：