Google ChromeでローカルファイルのAjax読み込みができない件

覚書です。

Webページ作成中に困ったことがあった。

jQueryのload()命令で同じサーバー上にあるファイルを読み込むコードを書いて、ローカル環境でテストしようとしたら読み込まれず、なんでかなーと思っていた。

Google ChromeのJavaScriptコンソールを確認してみたらこんなエラーが出ていた。

XMLHttpRequest cannot load file:〜. Origin null
                              is not allowed by Access-Control-Allow-Origin.

調べてみるとどうやら、Google Chromeではローカルファイルの読み込みを制限しているらしい。

Google Chromeでは(Ajaxで)ローカルファイルにアクセスしようとするとエラーになることについて、他

ローカルであってもWebサーバー経由でのアクセスであればいいらしい。「file:スキーマ」だと公開を意図していないファイルを盗まれるなどの恐れがあるからだろうか？

そこで起動時にオプション引数として「--allow-file-access-from-files」を与えればいいらしい。

上記サイトはWindowsユーザーのページのようなので回避策は別のページで調べた。

【警告】MacでGoogle Chromeに起動オプションをつける方法【消す】

$ /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \
 --allow-file-access-from-files

あるいは、

WebGL の脆弱性問題と Macintosh 版の Google Chrome に関して

$ open -a Google\ Chrome --args --allow-file-access-from-files

のようにすればいい。

あるいはAutomatorアプリにするとよいということ。ラウンチャアプリであるQuickSilverを使えば、コマンドライン引数を与えられるらしいのだが、残念ながら私が使っているDragThingsではできないよう。


ちなみに私は面倒なのでSafariで動作確認することで問題を回避。

Comments

お世話になります
IEはどうでしょうか？
クローンだと、起動オプションでできたのですが、
IEは、動きませんでした。
いい方法はありますか？

Posted by ｋｊｐ at 2015年08月19日 18:46