前后端分离看着很美好后端专注接口前端专注页面各司其职。但真正搭起来从开发到上线坑一个接一个。以下5个坑我每个都踩过至少两遍。1. 跨域开发时通上线就挂本地开发前端跑在localhost:8080后端跑在localhost:8081。浏览器一请求就报 CORS 错误。新手第一反应是在 Controller 上加CrossOrigin或者全局配个CorsConfiguration。开发环境确实通了但上线后前端部署到 Nginx后端在另一台机器跨域又来了。更坑的是有人直接在 Nginx 里加Access-Control-Allow-Origin:结果带 Cookie 的请求全部失效。正确姿势开发环境用 Vue 的devServer.proxy代理把/api转发到后端浏览器根本感知不到跨域。生产环境用 Nginx 反向代理前端请求/api由 Nginx 转发到后端服务同源问题自然消失。后端只在必要时配置精确的 CORS 白名单别图省事写 。2. 接口返回格式五花八门后端有的接口返回User对象有的返回success字符串有的抛异常直接吐 500 页面。前端每个请求都要写不同的判断逻辑if (res.data.code 200)和if (res.status 200)混着用乱成一锅粥。正确姿势定义统一的ResultT封装包含code、msg、data三个字段。所有接口必须返回这个结构。再用RestControllerAdvice做全局异常处理把业务异常、参数校验异常、系统异常全部转成统一格式。前端只需要一个 axios 响应拦截器判断code是否为成功码失败就弹msg。世界瞬间清净。3. Token 认证存哪都难受JWT 存localStorage吧怕 XSS存 Cookie 吧又怕 CSRF。前端路由守卫写了一遍后端拦截器又写一遍token 过期时间还不一致。最坑的是刷新页面后 token 还在但用户信息没了页面白屏。正确姿势JWT 存localStorage配合HttpOnly的刷新 token 存 Cookie。axios 请求拦截器统一加Authorization头响应拦截器捕获 401 就跳登录页并清除本地 token。前端路由守卫只负责页面跳转真正的权限校验永远在后端。别在前端存敏感信息也别信任前端传来的任何角色字段。4. History 模式刷新 404Vue Router 用history模式本地开发一切正常。打包扔到 Nginx 的html目录首页能打开一点刷新就 404。因为 Nginx 找不到/user/list这样的路径它以为你要访问一个真实文件。正确姿势Nginx 配置里加一行try_files $uri $uri/ /index.html;。意思是先找真实文件找不到就统统返回index.html让 Vue Router 去处理路由。如果后端和前端部署在同一个域名下记得把/api的 location 放在前面否则接口请求也会被吞掉。5. 文件上传与静态资源访问后端把文件上传到服务器本地磁盘返回一个/upload/xxx.jpg路径。前端一访问发现是前端自己的域名根本找不到图片。因为前后端分离后静态资源不在前端项目里。正确姿势要么把文件传到 OSS返回完整 URL要么在后端配置静态资源映射把/upload/映射到磁盘目录并且确保 Nginx 把/upload的请求转发给后端。如果用了 Nginx也可以直接让 Nginx 代理静态资源目录性能更好。千万别把文件存到项目resources目录里打包一次就丢一次。结语前后端分离不是简单的“你写接口我写页面”它涉及跨域、认证、部署、静态资源等一系列工程问题。这5个坑每一个都让我折腾过半天以上。总结成一句话开发环境靠代理生产环境靠 Nginx接口格式要统一认证校验在后端静态资源别乱放。踩过这些坑才算真正入了前后端分离的门。