接口对接就像一场没有剧本的相亲：前端后端明明都想把事儿办成，却总是因为各种“沟通障碍”黄掉——要么前端传错参数格式，要么后端返回的数据像“加密电报”，要么跨域这个拦路虎突然跳出来搅局……作为一名踩过无数坑的技术老兵，今天我就用清单式的方式，扒一扒那些年让我们欲哭无泪的接口对接误区，再附赠一份完整示例让你直接抄作业！
接口对接的5个“死亡陷阱”（附避坑指南）
陷阱1：参数格式“鸡同鸭讲”——JSON vs FormData傻傻分不清
前端小A：“我明明传了参数，后端怎么说没收到？”
后端小B：“我这边接收的是FormData，你发的JSON我怎么解析？”
这种场景是不是很熟悉？很多新手在网站开发或小程序开发时，都搞不清JSON和FormData的区别。比如前端用axios默认的JSON格式发数据，后端却用@RequestParam（期待FormData）接收，结果自然是“鸡同鸭讲”。
避坑指南：
1. 普通文本/JSON数据：用JSON格式（axios默认），后端用@RequestBody接收；
2. 上传文件/表单数据：用FormData格式，后端用@RequestParam或MultipartFile接收。
示例代码（Vue前端）：
// JSON格式请求
axios.post('/api/user', {name: '张三', age: 25})
.then(res => console.log(res));
// FormData格式请求（上传头像）
const formData = new FormData();
formData.append('avatar', file);
axios.post('/api/upload', formData, {
headers: {'Content-Type': 'multipart/form-data'}
});
陷阱2：跨域问题“拦路虎”——前端哭晕在浏览器控制台
当你看到浏览器控制台出现“Access-Control-Allow-Origin”相关错误时，恭喜你，跨域这个“老朋友”又来找你了。比如前端在localhost:8080运行，后端在localhost:9090，域名（端口）不一致就会触发跨域限制。
避坑指南：
1. 后端配置CORS（推荐）：比如Spring Boot中添加@CrossOrigin注解，或全局配置CORS；
2. 前端用代理：比如Vue的vue.config.js配置proxy，把/api请求转发到后端地址。
示例代码（Spring Boot后端）：
@RestController
@CrossOrigin(origins =