アルバイト先でウェブページを書くことになったのですが、その時のつまずきポイントのうちの一つです。
jQueryにはhtmlファイルを読み込んで埋め込んでくれる、load() メソッドというものがあります。
ファイルを別にして編集できるので、割と重宝していたのですが、Chromiumベースのブラウザでのみ遭遇するエラーというものに、時間を持っていかれました。
エラーの内容は
XMLHttpRequest cannot load 場所とファイル名 Origin null is not allowed by Access-Control-Allow-Origin.
最初は、権限がないとかパスが間違っているとか、そんな程度かと思っていたので、余計時間を食いました。(最初から調べるべきだったのです。)
さて、こいつを解消してやるにはどうすればいいのでしょうか。
1.そもそも何でエラーでるの
Chromeのベースにある、ローカルファイルに対するセキュリティの考え方が、これを実行不可能にしている様子。
この記事に一部日本語訳されたものが載っていました。
その中の、Chromeに関する記述が、
Chrome: ローカルWebページからのアクセスをローカルファイルシステム上のファイルに限定(ステップ5は困難)。ネット上のWebページからローカルファイルへのアクセスは拒否(ステップ2は困難)。開発の利便性や現状を加味してローカルWebページにおけるJavaScriptの実行は許可
となっています。
"Same Origin Policy" 日本語で言うと、「同一生成元ポリシー」というものにあたるようです。
クロスドメイン通信についてとともにまとめられていました。
要するに、あるローカルにある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も終了してしまうので注意しましょう。
それ以外の対応策
404 Blog Not Found:Ajax - Goodbye, JSONP. Hello, Access-Control-Allow-Origin
JSONP によるクロスドメインの通信: 第 1 回 JSONP と jQuery を組み合わせ、強力なマッシュアップを迅速に作成する
JSONP を使って、エラーを解消する方法。
PHP を利用して、ヘッダ部分を付加してエラーを回避する方法。
などがあるようです。
3.最後に
編集している時は、めんどくさくてSafariを起動してなんとかしようと思いました。しかし、開発ツールを表示する設定をしなければいけなかったり、Developer Toolsが微妙に使いにくくてちょっと......という感じでした。
何より、すごい勢いでキャッシュを拾ってくるのはやめてほしかったです。すぐ command + option + e を連打してキャッシュを削除って感じでした。