Firefox でローカルのHTMLが外部ファイル(Javascript等)を読み込めない問題の対応
おはようございます。
以前、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 エラー」などで調べていただければと思います。
何かのお役に立てれば。
ではでは。
ディスカッション
コメント一覧
FirefoxでZoomifyを使用していましたが、あるバージョンら画像が表示されなくなりました。貴兄の方法で解決いたしました。サーバーを立てれば問題ないのですが面倒ですよね。本当にありがとうございました。
Girod様
ブログを見ていただきありがとうございます。
お役に立てたようで大変嬉しく思います。
今後とも宜しくお願い致します。