問題
Chromeでは、XMLHttpRequestによるローカルファイルアクセスは、同一オリジンポリシーによりエラー（Same-Origin Policy違反）が発生し不可。
このローカルファイルアクセスとは、ブラウザからのWebサーバのファイルに対するアクセス（リクエスト）ではなく、PCの中に保存しているファイルに対するアクセスを意味しています。
たとえば、jQueryでjsonファイルにアクセスしたいならば、下記のようなコードになります。ところが、上記の通り、ローカルファイルアクセスの場合には、エラーが発生してしまいます。
// PCの中に保存しているdata.jsonを読み込みたい
$.getJSON('./data.json', function(data){ // getJSON()メソッドでエラーが発生してしまう
// 何らかの処理がここに入る
});
解決方法
- 非同期処理のファイルアクセスをやる必要が無い
- アクセス対象のファイルが固定されている（動的なファイル指定が不要）
- ファイルデータがJavaScriptグローバル名前空間上に配置されても問題が無い
上記の条件を満たすならば、簡単に解決可能です。JSONPやCORSによる対応は不要。
それは、HTMLのscriptタグのsrc属性は同一オリジンポリシーによる制限を受けないため、scriptタグからファイルアクセスする手法です。下記に具体例コードを示します。
またこの手法は、当然ですがサーバファイルアクセスでも（下記の場合ならば、data.jsがWebサーバの中に保存されていても）同一のコードで大丈夫です。
<script type="text/javascript" src="./data.js"></script>
<script type="text/javascript">
// JavaScript変数のhobbyに対する何らかの処理がここに入る
</script>
data.js
// JSONデータをJavaScript変数のhobbyに代入する
var hobby = [
{ id: 1, name: "ichiro"},
{ id: 2, name: "jiro"},
{ id: 3, name: "saburo"},
];