質問: Javascriptでローカルのjsonファイルを読み込むために `$.ajax` を使おうとし、下記のようなコードを実行したところ、失敗と帰ってきてしまいました。 詳しい方、原因を教えてください。(ちなみにjsonファイルはこのソースファイルと同じ階層にあるのでそこのところは大丈夫だと思います。あとjsonファイルの構文解析をwebサイトでしても何もエラーは吐かれませんでした) ``` window.onload=function(){ $.ajax({ type:"get", url:"template.json", dataType:"json", success:function(data){alert("成功");}, error:function(){alert("失敗");} }); }; ```
回答: ※ 質問者さんが Google Chrome や Opera などのブラウザを使用していることを前提に回答をします。 Google Chrome や Opera などのブラウザでは、ローカルファイルへの Ajax によるリクエストは**デフォルトでブロック**されます。 * Issue 37586 - chromium - An open-source project to help move the web forward. - Monorail * Issue 47416 - chromium - An open-source project to help move the web forward. - Monorail 一方 Firefox では、**特定の状況でのみファイルの読み込みが許可**されます。 > > file: URI の同一オリジンポリシー[1] > ========================================================================================================================== > > > Gecko 1.9 からは、ファイルは特定のファイルのみ読み込みが許可されます。具体的には、読み込み元ファイルの親ディレクトリが、読み込み対象ファイルの祖先ディレクトリと同じ場合のみ、読み込みができます。ただし、ディレクトリはこの方法では読み込めません。 > > > そのため、今回の場合は Google Chrome や Opera の代わりに、Firefox を使用することで、質問者さんの問題は解決します。 また、Google Chrome, Opera を使わなければならない場合、起動オプション (`--allow-file-access-from-files`) を設定することで解決出来ます[2]。 上で挙げた以外にも、多くの解決策があります。 それらに関する詳細は、以下の Web ページに書かれているので、一度読んでみると良いと思います。 * ローカル (`file:///`) 上で外部ファイル読み込みのセキュリティ制約を回避するいくつかの方法