JavaScript前端通过fetch或Axios与Node.js后端通信，后端用Express接收请求并响应JSON；需注意CORS跨域、JSON序列化、路径一致性等细节。
JavaScript 前端通过 HTTP 请求与 Node.js 后端通信，最常用方式是 fetch API 或 Axios 发送请求，后端用 Express 等框架接收并响应。
前端发请求：用 fetch 调用 Node.js 接口
假设 Node.js 启动在 http://localhost:3000，提供一个 /api/users 接口：
- GET 请求获取数据：fetch('/api/users').then(res => res.json()).then(data => console.log(data))
- POST 提交 JSON：fetch('/api/users', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ name: 'Alice' }) })
- 注意跨域问题：开发时后端需配置
CORS（如用cors中间件），生产环境建议统一域名或配 Nginx 反向代理
Node.js 后端接收请求：以 Express 为例
简单示例——启动服务、定义路由、解析数据：
- 安装依赖：npm install express cors body-parser
- 启用 JSON 解析：app.use(express.json()); app.use(express.urlencoded({ extended: true }));
- 写接口：app.get('/api/users', (req, res) => res.json([{ id: 1, name: 'Alice' }]))
- 处理 POST：app.post('/api/users', (req, res) => { console.log(req.body); res.status(201).json({ ok: true }) })
前后端联调常见问题
实际开发中容易卡在这几个点：
-
端口冲突或服务没起来：确认
node server.js正常运行，并监听正确端口（如app.listen(3000)） -
404 错误：检查前端请求路径是否与后端
app.get('/xxx')完全一致（包括斜杠、大小写） -
400 或解析失败：确保前端
Content-Type是application/json，且body已用JSON.stringify() -
本地开发跨域报错：后端加
app.use(cors())，或前端用代理（如 Vue CLI 的vue.config.js中设proxy）
进阶建议：用 Axios 替代原生 fetch
更简洁、自动序列化、支持拦截器：
- 安装：npm install axios
- 发送 GET：axios.get('/api/users').then(res => console.log(res.data))
- 统一错误处理：axios.interceptors.response.use(null, err => { alert('请求失败：' + err.message) })
- 避免重复写 baseURL：axios.create({ baseURL: 'http://localhost:3000' })
基本上就这些。核心就是“前端发、后端收”，协议是 HTTP，数据格式通常是 JSON。不复杂但容易忽略细节，比如 CORS、JSON 序列化、路径拼写——把这几处对齐，通信就
通了。
