如何解决Node.js中app.js向前端script.js传数据时报404的问题

• 你混淆了服务端Node.js运行环境与浏览器端运行环境的差异：app.js是运行在本地Node.js进程的服务端代码，用到的require、fs模块、module.exports都属于Node.js专属的CommonJS规范能力，浏览器本身不支持这些API，也没有权限直接读取你服务端磁盘上的文件。
• 浏览器解析script.js中的import '../src/app.js'语句时，会将路径识别为网络资源地址，自动向localhost:5000发起GET请求拉取该资源，而你的服务端没有配置对应路径的响应规则，自然返回404错误。

方案1：托管JSON为静态资源（适合静态数据场景） #

如果你的data.json是固定不变的静态数据，直接将文件放到服务端的静态资源托管目录（通常为public、static文件夹），在script.js中直接请求该JSON文件即可：

// script.js 代码
fetch('/data.json')
  .then(res => res.json())
  .then(data => {
    console.log(data)
    // 此处编写页面渲染逻辑
  })

方案2：服务端新增接口返回数据（适合动态数据场景） #

如果数据需要在app.js中做动态处理后再返回，在你的Node.js服务中新增一个接口路由即可（以下以Express框架为例）：

// app.js 新增代码
const express = require('express')
const app = express()
// 保留你原有静态资源托管的逻辑
app.use(express.static('public'))

// 新增数据接口
app.get('/api/data', (req, res) => {
  // 此处data为你之前读取处理完成的数据变量
  res.json(data)
})

app.listen(5000)

之后在script.js中请求该接口获取数据：

// script.js 代码
fetch('/api/data')
  .then(res => res.json())
  .then(data => {
    console.log(data)
    // 此处编写页面渲染逻辑
  })

额外注意：你原有app.js中两次用const定义同名data变量不符合JS语法规范，建议调整为不同变量名避免后续报错：

// 调整前
const data = path.join(__dirname, '../data/data.json');
const data = fs.readFileSync(`${data}`, "utf-8");
// 调整后
const dataPath = path.join(__dirname, '../data/data.json');
const data = fs.readFileSync(dataPath, "utf-8");

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