无Web服务器环境下本地项目加载JSON文件的问题

你遇到的问题主要来自两个核心点——浏览器的本地文件安全限制和JSON文件的语法错误，咱们一步步来搞定：

1. 先修复JSON文件的语法问题 #

你的test.json里的键名name和url没加双引号，这不符合JSON的严格语法规范，浏览器解析时会直接报错。正确的写法应该是：

[
  { 
    "name": "Google", 
    "url": "https://www.google.com" 
  }, 
  { 
    "name": "Bing", 
    "url": "https://www.bing.com" 
  }
]

划重点：JSON要求所有键名必须用双引号包裹，不能用单引号或者不加引号，而且最后一个键值对后面不能留多余的逗号。

2. 绕过浏览器本地文件安全限制的方案 #

直接用file://协议访问本地文件时，浏览器的同源策略会阻止XMLHttpRequest请求，这是默认的安全机制。这里给你几个实用的解决办法：

方案一：用浏览器启动参数关闭本地文件限制 #

不同浏览器可以通过启动参数绕过这个限制：

• Chrome/Edge：在终端里输入对应命令（注意替换成你自己的浏览器安装路径）：

  # Windows示例
  "C:\Program Files\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files
  # Mac示例
  open -a "Google Chrome" --args --allow-file-access-from-files
  

  启动浏览器后再打开你的本地HTML文件，就能正常加载JSON了。

方案二：快速搭一个本地Web服务器（更推荐） #

这是最符合Web开发常规环境的方法，完全不会有安全限制问题。用Python或Node.js都能快速搞定：

• Python 3+：在项目文件夹打开终端，输入：

  python -m http.server 8000
  

  然后在浏览器访问http://localhost:8000，就能正常加载data/test.json了。
• Node.js（需先安装http-server）：先全局安装工具包：

  npm install -g http-server
  

  再在项目文件夹运行：

  http-server -p 8000
  

  同样访问http://localhost:8000即可。

方案三：改用现代的fetch API（仍需解决文件限制） #

如果不想用XMLHttpRequest，也可以用更简洁的fetch API，写法如下：

fetch('data/test.json')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('加载失败:', error));

最后补全你的loadJSON函数 #

你的loadJSON函数看起来没写完，完整的XMLHttpRequest实现应该是这样的：

function loadJSON(path, callback) {
  var xobj = new XMLHttpRequest();
  xobj.overrideMimeType("application/json");
  xobj.open('GET', path, true); // 开启异步请求
  xobj.onreadystatechange = function () {
    // 确保请求完成且成功
    if (xobj.readyState == 4 && xobj.status == 200) {
      callback(JSON.parse(xobj.responseText));
    }
  };
  xobj.send(null);
}

// 调用示例
loadJSON("data/test.json", function(response) {
  console.log(response);
});

先修复JSON语法，再选一个方案解决本地文件访问限制，就能顺利加载数据啦！

内容的提问来源于stack exchange，提问作者Black