前端JS读取本地JSON文件遇模块及404错误求助

为什么Node.js的fs模块在前端用不了？ #

• fs是Node.js专属的文件系统模块，浏览器环境根本没有这个API，直接调用自然会提示readFile未定义。
• 浏览器端JS默认不支持Node.js的模块系统，硬加import语句就会触发“不能在模块外使用import”的错误——前端有自己的ES模块规范，但和Node的CommonJS不是一回事，而且fs本身就不属于前端API。

搞定fetch 404错误的具体步骤 #

1. 先确认文件位置和路径 #

• 把configuration.json和index.html放在完全相同的目录，别搞子目录嵌套，还要检查文件名大小写（服务器对大小写敏感，比如Config.json和config.json是两个文件）。
• 直接在浏览器地址栏敲http://localhost:xxxx/configuration.json（xxxx是你本地服务器的端口号），能看到JSON内容就说明路径没问题；还是404的话，要么文件放错地方了，要么服务器没正确映射这个目录。

2. 正确的fetch调用写法 #

前端读取同目录JSON的标准写法，直接抄就行：

async function loadConfig() {
  try {
    // 用相对路径指向同目录的JSON文件
    const res = await fetch('./configuration.json');
    if (!res.ok) {
      throw new Error(`请求失败：状态码 ${res.status}`);
    }
    const configObj = await res.json();
    // 把JSON对象传给你的getProxyURL函数
    getProxyURL(configObj);
  } catch (err) {
    console.log('加载配置出错:', err);
  }
}

// 页面加载时调用
window.addEventListener('load', loadConfig);

3. 必须用本地服务器运行，不能直接打开html文件 #

• 别双击index.html用file://协议打开！浏览器出于安全限制，file://下fetch根本读不了本地文件，必须用本地服务器跑。
• 简单的办法：用VS Code的Live Server插件，右键点击index.html选“Open with Live Server”，它会自动启动一个本地服务器，此时fetch就能正常访问同目录的JSON了。也可以用http-server（npm全局安装后，在目录下敲http-server就行）。

4. 自定义服务器要配置静态文件访问 #

如果自己写Node.js服务器（比如Express），得把当前目录设为静态资源目录，不然服务器找不到JSON文件：

const express = require('express');
const app = express();

// 关键：把当前目录设为静态文件目录
app.use(express.static(__dirname));

app.listen(3000, () => {
  console.log('服务器跑在 http://localhost:3000');
});

额外注意点 #

• 检查configuration.json的格式有没有语法错误，比如少个逗号、引号不配对，这些会导致res.json()解析失败，控制台会报错。
• 生产环境部署时，要确保JSON文件被打包到静态资源目录，别被构建工具（比如Webpack）给忽略了。

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