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 }) })
前后端联调常见问题
实际开发中容易卡在这几个点：
立即学习“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后端交互？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1543607.html
微信扫一扫 
支付宝扫一扫 
