无法使用javascript（jquery）访问Chrome中的json对象

Question

我花了好几个小时试图在javascript中访问存储为本地文件的json对象。 基本上我试图使用json文件初始化js对象与json文件中的值。这需要在Chrome中完成。我知道人们有类似的问题（与安全有关），但我找不到办法做到这一点。

till.js文件如下所示：

function Till(){
  var mydata = $.getJSON("/files/hipstercoffee.json")
  this.shop = mydata[0].shop;
  console.log(mydata[0].shop);
}

json文件如下所示：

[
  {
    "shop": "Coffshop",
    "address": "123 Happy Street",
    "prices": [
      {
        "Latte": 2.80,
        "Tea": 2.10
      }
    ]
  }
]

在基本的index.html文件中，我有以下脚本标记：

<script type = "text/javascript" src = "src/till.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>  

我加载index.html文件，在Chrome开发者控制台中输入：

var till = new Till();

我得到的错误信息是：

  

XMLHttpRequest无法加载file：///files/coffee.json
  交叉源请求仅支持协议方案：http，   数据，chrome，chrome-extension，https，chrome-extension-resource。

如何解决这个问题？