あさた研メモ

主に私が気づいたこととか困った時のメモとか書き留めとく用。

javascriptのJSONパースで嵌った

この記事は未解決です。

書いたコード

family.json

{
    "list":[
        {
            "id": 1,
            "name": "波平",
            "parent": null,
            "marrige": 2,
            "children": [3,4,5]
        },

        {
            "id": 2,
            "name": "フネ",
            "parent": null,
            "marrige": 1,
            "children": [3,4,5]
        },

        {
            "id": 3,
            "name": "サザエ",
            "parent": [1,2],
            "marrige": "6",
            "children": [7]
        },

        {
            "id": 4,
            "name": "カツオ",
            "parent": [1,2],
            "marrige": null,
            "children": []
        },

        {
            "id": 5,
            "name": "ワカメ",
            "parent": [1,2],
            "marrige": null,
            "children": []
        },

        {
            "id": 6,
            "name": "マスオ",
            "parent": null,
            "marrige": 3,
            "children": []
        },

        {
            "id": 7,
            "name": "タラオ",
            "parent": [3,6],
            "marrige": null,
            "children": []
        }
    ]
}

sazae.js

$(function(){
  $.getJSON("json/family.json", function(){
    console.log("success!");
  });
});

Chromeで確認

F12とか押してConsoleを確認。すると…

XMLHttpRequest cannot load file:///Users/test/Project/json/family.json.Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

なんじゃこりゃ。

原因

Chromeではセキュリティ上の観点から、ローカルファイルにリクエストを送ることができないみたい?

ajax使わないようにしても、Chromeでは動かず、Firefoxなどでは動く。

わけがわからないのでだれか原因と対策を教えてください…。

追記

Chromeではajaxでローカルファイルにアクセスするのはセキュリティ上無理ということですが、
jQueryだろうとなんだろうと駄目なので、おとなしく他ブラウザ使ったほうが良さそうです。 試しにXMLHttpRequestでやってみましたが駄目でした。

対策としては、おとなしくどっかのサーバに上げるとかが良さそうです。