Javascript如何与Node.js后端交互？

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 }) })

前后端联调常见问题

实际开发中容易卡在这几个点：

JSON入门指南 中文WORD版

JSON 即 JavaScript Object Natation，它是一种轻量级的数据交换格式，非常适合于服务器与 JavaScript 的交互。本文将快速讲解 JSON 格式，并通过代码示例演示如何分别在客户端和服务器端进行 JSON 格式数据的处理。

0

查看详情

立即学习“Java免费学习笔记（深入）”；

• 端口冲突或服务没起来：确认 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 序列化、路径拼写——把这几处对齐，通信就通了。

以上就是Javascript如何与Node.js后端交互？的详细内容，更多请关注php中文网其它相关文章！