无网络环境下用HTML/JS读取本地JSON文件报错求助

你遇到的核心问题是：直接通过file://协议打开本地HTML文件时，浏览器的安全策略会阻止fetch请求访问本地JSON文件，这是浏览器为防止本地文件被恶意脚本读取的限制。

下面是几种无网络环境下可行的解决方法：

方法1：启动本地静态服务器 #

这是最贴近你原有代码逻辑的方案，无需大幅修改代码，只需在本地启动轻量静态服务器，让页面通过http://localhost访问，即可绕过file://的限制。

启动服务器的方式： #

• Python 3：打开终端，进入HTML和JSON文件所在文件夹，执行：

  python -m http.server 8000
  

• Python 2：

  python -m SimpleHTTPServer 8000
  

• Node.js（已安装时）：

  npx http-server
  

启动后，在浏览器访问http://localhost:8000/你的文件名.html，原有fetch代码即可正常运行。

方法2：将JSON直接嵌入JS文件 #

若不想启动服务器，可把JSON内容直接写入JS变量，彻底绕开文件读取问题。

示例：

<script>
// 把my_json_file.json里的内容直接复制到此处
const mydata = {
  labels: ["Red", "Blue", "Yellow"],
  datasets: [{
    data: [10, 20, 30],
    backgroundColor: ["#FF6384", "#36A2EB", "#FFCE56"]
  }]
};

// 直接用数据初始化图表
window.onload = function() {
  var ctx = document.getElementById("myChart").getContext("2d");
  var myNewChart = new Chart(ctx, {
    type: 'polarArea',
    data: mydata
  });
};
</script>

方法3：通过文件选择器让用户手动上传JSON #

若需动态读取不同本地JSON文件，可使用<input type="file">让用户选择文件，再通过FileReader读取内容：

示例：

<input type="file" id="jsonFileInput" accept=".json">
<canvas id="myChart"></canvas>

<script>
document.getElementById('jsonFileInput').addEventListener('change', function(e) {
  const file = e.target.files[0];
  if (!file) return;

  const reader = new FileReader();
  reader.onload = function(event) {
    try {
      const mydata = JSON.parse(event.target.result);
      // 初始化图表
      var ctx = document.getElementById("myChart").getContext("2d");
      var myNewChart = new Chart(ctx, {
        type: 'polarArea',
        data: mydata
      });
    } catch (err) {
      console.error('JSON解析失败:', err);
    }
  };
  reader.readAsText(file);
});
</script>

注意：你原有代码中new Chart(ctx).PolarArea(mydata)是旧版Chart.js写法，新版需改为new Chart(ctx, {type: 'polarArea', data: mydata})，这个问题也可能导致图表初始化失败，记得同步修改。

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