積極的にメモっていく姿勢

題名詐欺。更新頻度の低さが売り。

load() を使うと Chrome が文句言う

アルバイト先でウェブページを書くことになったのですが、その時のつまずきポイントのうちの一つです。

jQueryにはhtmlファイルを読み込んで埋め込んでくれる、load() メソッドというものがあります。

ファイルを別にして編集できるので、割と重宝していたのですが、Chromiumベースのブラウザでのみ遭遇するエラーというものに、時間を持っていかれました。

エラーの内容は

XMLHttpRequest cannot load 場所とファイル名 Origin null is not allowed by Access-Control-Allow-Origin.

最初は、権限がないとかパスが間違っているとか、そんな程度かと思っていたので、余計時間を食いました。(最初から調べるべきだったのです。)

さて、こいつを解消してやるにはどうすればいいのでしょうか。

1.そもそも何でエラーでるの

Chromeのベースにある、ローカルファイルに対するセキュリティの考え方が、これを実行不可能にしている様子。

この記事に一部日本語訳されたものが載っていました。

Chromeセキュリティモデル、IE/Firefox/Safari/Operaのいいとこ取り | マイナビニュース

その中の、Chromeに関する記述が、

Chrome: ローカルWebページからのアクセスをローカルファイルシステム上のファイルに限定(ステップ5は困難)。ネット上のWebページからローカルファイルへのアクセスは拒否(ステップ2は困難)。開発の利便性や現状を加味してローカルWebページにおけるJavaScriptの実行は許可

となっています。

"Same Origin Policy" 日本語で言うと、「同一生成元ポリシー」というものにあたるようです。
クロスドメイン通信についてとともにまとめられていました。

http://hdemon.net/cross-domain.html

要するに、あるローカルにあるWebページからは、ローカルであれどこであれ、Webページにはアクセス出来ないということでしょうか。

今の状況なら、loadする側がローカルにあるので、このエラーが出るのは当然です。

2.対応策

Chromeに起動オプションを追加することで乗り越えるようです。

--allow-file-access-from-files

このオプションをつけて起動したら、なんとかなるらしい。

Macを使っているので、Windowsとは違うような気がしていましたが、大体一緒でした。

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

エラーも出ずにうまいこと行きました。

このときターミナルを閉じてしまったり、終了させたりしてしまうと、Chromeも終了してしまうので注意しましょう。

3.最後に

編集している時は、めんどくさくてSafariを起動してなんとかしようと思いました。しかし、開発ツールを表示する設定をしなければいけなかったり、Developer Toolsが微妙に使いにくくてちょっと......という感じでした。

何より、すごい勢いでキャッシュを拾ってくるのはやめてほしかったです。すぐ command + option + e を連打してキャッシュを削除って感じでした。