JavaScript JSON联调核心是“前端序列化发、后端解析收，再反向响应”，需确保格式统一、路径一致、跨域可控、错误可捕获：前端用JSON.stringify()转字符串并设Content-Type头；后端配json中间件（如Express.use(express.json())或Spring Boot @RequestBody）；开发时用CORS或代理解决跨域；响应需检查status后再json()解析，并用try/catch捕获异常。
JavaScript 中 JSON 数据与后端接口联调，核心是“前端序列化发、后端解析收，再反向响应”，关键在格式统一、路径一致、跨域可控、错误可捕获。
前端发送 JSON 数据要规范
浏览器不直接传 JS 对象，必须转成 JSON 字符串，并设置正确请求头：
- 用 JSON.stringify() 把对象转为字符串，例如
{name: "张三", age: 25}→'{"name":"张三","age":25}' - POST/PUT 请求必须加
headers: {'Content-Type': 'application/json'}，否则后端可能无法识别为 JSON - fetch 示例：
fetch('/api/user', {<br> method: 'POST',<br> headers: {'Content-Type': 'application/json'},<br> body: JSON.stringify({name: '李四', email: 'lisi@example.com'})<br>})
后端接收 JSON 要配好中间件
以 Express（Node.js）或 Spring Boot（Java）为例，后端不能自动读取 JSON 体，需显式启用解析：
- Express：必须写
app.use(express.json())和app.use(express.urlencoded({ extended: true }))，否则req.body为空 - Spring Boot：Controller 方法参数加
@RequestBody注解，如public ResponseEntity> createUser(@RequestBody User user) - 注意：若前端发的是表单格式（
application/x-www-form-urlencoded），后端要用 urlencoded 解析，不是 json 中间件
跨域问题必须提前处理
本地开发时，前端（http://localhost:5173）和后端（http://localhost:3000）端口不同，浏览器会拦截请求：
立即学习“Java免费学习笔记（深入）”；
- 开发阶段：后端启用 CORS 中间件，Express 可用
cors()允许所有源（仅限开发） - 生产阶段：禁止
origin: "*"，应精确配置允许的域名，如['https://your-app.com'] - 替代方案：前端 Vite/Webpack 配代理（
vite.config.ts中设server.proxy），把/api请求转发到后端，绕过浏览器同源检查
响应处理要兼顾成功与失败
后端返回的不是裸数据，而是带状态码的 HTTP 响应，前端需分层处理：
- 先检查
response.ok或response.status，区分网络失败（如 404、500）和业务失败（如 200 但{code: 4001, msg: "用户名已存在"}） - 再调用
response.json()解析，不要假设一定成功——空响应、非 JSON 内容会报错 - 推荐用 async/await 封装，配合 try/catch 统一捕获异常：
try {<br> const res = await fetch('/api/login', { method: 'POST', body: JSON.stringify(data) });<br> if (!res.ok) throw new Error(`HTTP ${res.status}`);<br> const data = await res.json();<br> console.log('登录成功', data);<br>} catch (err) {<br> console.error('请求异常', err);<br>}
