ローカル環境でJavaScripitによるhtmlの読み込みができないときの対処方法

Webサイトのメニューを一元化するため、メニューのhtmlを分割し、インクルードする方法を試していた時のこと。
ローカルでJavaScripitによるhtmlの読み込みを試していたところ、まったく読み込みできなくて困っていました。その解決方法です。

現象

ローカル環境でJavaScripitによるhtmlの読み込みがうまくいかない。
alert( );
は動いていて、JavaScripit自体は動いているのに、
.load( );
だけがうまく動かない状態です。

開発者ツールで問題点を出す

firefox の開発ツールの「コンソール」では、以下のようなエラーが出ます。

クロスオリジン要求をブロックしました: 同一生成元ポリシーにより、file:///C:/Users/xxx/test/list.html にあるリモートリソースの読み込みは拒否されます (理由: CORS 要求が http でない)。

Chromeのデベロッパーツールの「Console」では、以下のようなエラーが出ます。

Access to XMLHttpRequest at 'file:///C:/Users/xxx/test/list.html' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

どうやら、セキュリティ上の理由でローカルファイルから別のローカルファイル等を読み込めない仕様のようです。

解決方法は以下のサイトを参照しました。 www.doraxdora.com www.doraxdora.com

firefoxでの解決方法

1.　firefoxのアドレスバーに「about:config」を入力して実行（エンター）。
2.　検索に「security.fileuri.strict_origin_policy」を入力。値を「true」から「false」に変更。
3.　ローカルファイルの読み込みができるようになる。
4.　検証後は、変更した値を元に戻しておく。

以上。