无法获取本地JSON数据文件？求助VSCode环境下的解决方法

1. 核查文件路径准确性 #

• 优先使用相对路径：若JSON文件与代码在同一目录，直接写 ./data.json，避免使用带盘符的绝对路径，减少转义符、权限引发的问题。
• 严格匹配大小写：部分运行环境（如Node.js）对文件名大小写敏感，确保代码中写的文件名和实际文件名完全一致（比如Data.json和data.json会被判定为不同文件）。

2. 启用本地服务器环境 #

前端页面直接通过file://协议打开时，浏览器会因跨域安全策略阻止读取本地文件，必须借助本地服务器：

• 使用VSCode插件Live Server：右键目标HTML文件，选择「Open with Live Server」，再发起JSON文件请求。
• 用Node.js快速搭建服务：创建如下脚本文件（如server.js），运行node server.js后访问http://localhost:3000

  const http = require('http');
  const fs = require('fs');
  const path = require('path');
  
  http.createServer((req, res) => {
    const filePath = path.join(__dirname, req.url === '/' ? 'index.html' : req.url);
    fs.readFile(filePath, (err, data) => {
      if (err) {
        res.writeHead(404);
        res.end('File not found');
        return;
      }
      res.end(data);
    });
  }).listen(3000);
  

3. 校验JSON文件格式合法性 #

• 利用VSCode自带校验：打开JSON文件，编辑器会标红语法错误（比如多余逗号、引号不配对、键未加双引号）。
• 用命令行校验：安装jsonlint包后，执行npx jsonlint data.json快速排查格式问题。

4. 检查文件权限 #

• Linux/macOS系统：执行chmod +r data.json赋予文件读取权限。
• Windows系统：右键文件打开属性，取消「只读」勾选，确认当前用户拥有读取权限。

5. 修正代码请求逻辑 #

以fetch为例，确保写法规范并添加错误捕获：

fetch('./data.json')
  .then(response => {
    if (!response.ok) throw new Error('请求失败');
    return response.json();
  })
  .then(data => console.log(data))
  .catch(err => console.error(err));

同时打开浏览器开发者工具（F12）查看Console面板的报错信息，根据提示精准定位（如404代表路径错误，CORS代表未启用本地服务器）。

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