はじめに
ローカルにあるjsonファイルを$.getJSONで読み込んで、それを使ってあれこれやりたかったが、
Chromeで以下が発生。
ローカルファイルにAjaxリクエストを送ると怒られる。
XMLHttpRequest cannot load file:///Users/test/Documents/json/contents.json.Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
これが発生すること自体は知っていたが、特に今までChromeじゃないと困るってことは無かったのでエラーが起きないFirefoxを使ってローカルで確認していた。
今回Chromeの方がいい事情があり、解決策を調べてみた。
ローカルサーバーをたてるとかそういうのは面倒くさいのでしたくなかった。
解決
調べてみるとChromeではセキュリティ上の都合でローカルファイルへのAjaxリクエストはできないようになっているらしい。
--allow-file-access-from-filesをつけてChromeを起動すればいけると書いてあったのでやってみたものの、動かず。
最終的にMacではsudoつけたらいけた。
$ sudo /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --args -allow-file-access-from-files
Windowsも調べてChromeのショートカットを右クリック→PropertiesでTargetの後ろに--allow-file-access-from-filesを付けてChromeを起動したがうまく動いてくれなかった。
それで管理者権限でコマンドプロンプト起動してChromeのパス --allow-file-access-from-filesでいけた。
次からはショートカットダブルクリックしただけ動くようになってた。
見ていたところに管理者で実行しないといけない系のことは書いてなかったのでそんなことは思いつかず、現行バージョンではダメになったのかな〜ってちょっとの間悩んだ。
2018/02/16
簡易的なローカルサーバー立てるのもそこまで手間でもないのでもういっそローカルサーバーでも良さそう。
$ npm install -g live-server
$ cd <ドキュメントルートとするディレクトリ>
$ live-server .
# http://localost:8080/でブラウザからアクセス可能