Firefox でローカルのHTMLが外部ファイル(Javascript等)を読み込めない問題の対応

2019年7月16日小ネタ,開発

おはようございます。

以前、Google Chrome で同様の問題についての対応を書きましたが、
いつの間にか Firefox でも発生するようになってしまったので、どうすればいいか調べてみました。

※Firefox68からの仕様だそうです。ローカルファイルがそれぞれ別のオリジンを与えられるようになりました

専門的な言い方をすると、CORS というセキュリティ上の仕組みによって異なるオリジン(ドメイン等)間でのリソースの共有が制限されるようです。

特に今回のような、ローカル上でモックアップなんかを動かす際に、共通部分を別ファイルに分離して各ファイルから読み込むような場合に発生しやすいとのこと。
セキュリティ上の仕組みなんで文句は言えないんですけどね。

Chrome 編はこちら

スポンサーリンク

対応

設定を変更する

一番手っ取り早い方法ですが、特別な理由がない限り変更すべきでない設定でもあるので、各自の責任でお願いします。

1.設定画面を開く

アドレスバーに「about:config」を入力して Enter

2.設定を変更する

「security.fileuri.strict_origin_policy」の値を、true から false に変更する。

以上でローカルファイルの読み込みも出来るようになります。

WEBサーバーを利用

Google Chrome 編でも書きましたが、基本的にはWEBサーバーを立てるのが正しい方法になります。

(ただ、WEBサーバー立てるのが面倒なので画面周りを先にローカルで作ってるんですけどね。。)

まとめ

Google Chrome とは異なり、オプションによる設定が可能なので簡単ですね。

実際に稼働させているシステムでも起こりうるエラーで、その場合は今回の方法での対応は基本NGですので、
「CORS エラー」などで調べていただければと思います。

何かのお役に立てれば。

ではでは。

 

スポンサーリンク


関連するコンテンツ

2019年7月16日小ネタ,開発Firefox,Windows,セキュリティ

Posted by doradora