【Java全栈教程 07】前后端联调实战：跨域、接口对接与完整列表页

本系列第 7 篇 · 预计阅读 18 分钟

前端跑在 8080，后端也在 8080（或 8081）时，会遇到 跨域 问题。本篇解决 CORS，完成 Vue 2 与 Spring Boot 的完整联调，实现可增删改查的学生管理页面。

步骤一：理解跨域问题

浏览器同源策略：协议、域名、端口三者一致才为「同源」。

前端：http://localhost:8080  （Vue devServer）

后端：http://localhost:8081  （Spring Boot） 

→ 端口不同，产生跨域

报错示例：

Access to XMLHttpRequest has been blocked by CORS policy

步骤二：后端配置 CORS

在 Spring Boot 中添加配置类：

重启后端，跨域问题解决。

备选：Vue 开发代理

vue.config.js：

此时 Axios 的 baseURL 留空或设为 '' 即可。

步骤三：完善 API 模块

src/api/student.js 完整版：

步骤四：列表页加载真实数据

更新 StudentList.vue：

步骤五：新增与编辑对话框

使用 Element UI 的 el-dialog + el-form：

提交时调用 addStudent 或 updateStudent，成功后关闭对话框并刷新列表。

步骤六：联调检查清单

检查项	说明
后端已启动	8081 端口可访问 /api/students
CORS 或代理	二选一配置正确
响应格式	code === 200  时取 data
字段映射	className  ↔ 数据库 class_name
网络面板	F12 → Network 查看请求状态