Access to XMLHttpRequest at 'http://127.0.0.1:8080/system/user/list' from origin 'http://localhost:5173' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

你遇到的错误信息： ``` Access to XMLHttpRequest at 'http://127.0.0.1:8080/system/user/list' from origin 'http://localhost:5173' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. ``` 是典型的 **跨域请求被浏览器阻止** 的错误。 --- ## 🧾 错误分析 ### ✅ 核心问题： - 前端运行在 `http://localhost:5173`（可能是 Vue、React 等前端项目）。 - 请求的接口地址是 `http://127.0.0.1:8080`（Spring Boot 后端）。 - 浏览器出于安全考虑，执行了 **同源策略（Same-Origin Policy）**，阻止了跨域请求。 - 后端未在响应头中添加 `Access-Control-Allow-Origin`，因此浏览器拒绝了该请求。 --- ## ✅ 解决方案 ### ✅ 方法一：Spring Boot 后端添加 CORS 支持（推荐） #### 1. 使用 `@CrossOrigin` 注解（适用于单个接口） ```java @RestController @RequestMapping("/system/user") @CrossOrigin(origins = "http://localhost:5173") public class UserController { @GetMapping("/list") public ResponseEntity<List<User>> listUsers() { List<User> users = userService.findAll(); return ResponseEntity.ok(users); } } ``` > 优点：简单快捷 > 缺点：每个接口都要加，维护成本高 --- #### 2. 全局配置 CORS（推荐） 创建一个配置类，统一处理所有跨域请求。 ```java @Configuration @EnableWebMvc public class CorsConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/system/user/**") // 指定需要跨域的路径 .allowedOrigins("http://localhost:5173") // 允许的源 .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS") // 允许的方法 .allowedHeaders("*") // 允许的头部 .exposedHeaders("Authorization") // 可选：暴露给前端的头部 .allowCredentials(true); // 是否允许发送 Cookie } } ``` > ✅ 优点：统一配置，适用于整个项目 > ✅ 推荐使用这种方式 --- ### ✅ 方法二：使用 Nginx 反向代理（生产环境推荐） 如果你部署了前端和后端，可以通过 Nginx 将前后端统一到一个域名和端口下，避免跨域。 #### 示例 Nginx 配置： ```nginx server { listen 80; server_name yourdomain.com; location / { root /path/to/your/frontend/dist; index index.html; try_files $uri $uri/ =404; } location /system/ { proxy_pass http://localhost:8080/system/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } } ``` 这样前端访问 `/system/user/list` 时，就和后端在同一个域名下，不会触发跨域。 --- ### ✅ 方法三：开发阶段使用代理（适用于 Vue/React） 如果你使用的是 Vue CLI 或 Vite，可以在前端配置代理，避免跨域。 #### Vue/Vite 项目中配置代理（`vite.config.js`）： ```js export default defineConfig({ plugins: [vue()], server: { proxy: { '/system': { target: 'http://127.0.0.1:8080', changeOrigin: true, rewrite: (path) => path.replace(/^\/system/, '/system') } } } }); ``` 这样前端请求 `/system/user/list` 会被代理到 `http://127.0.0.1:8080/system/user/list`，浏览器认为是同源请求，不会触发跨域。 --- ## ✅ 示例：一个完整的 Controller 接口（带 CORS 支持） ```java @RestController @RequestMapping("/system/user") @CrossOrigin(origins = "http://localhost:5173") public class UserController { @Autowired private UserService userService; @GetMapping("/list") public ResponseEntity<List<User>> listUsers() { List<User> users = userService.findAll(); return ResponseEntity.ok(users); } } ``` --- ## ✅ 总结 | 问题 | 原因 | 解决方法 | |------|------|----------| | CORS 被阻止 | 前后端端口不同 | 后端配置 `@CrossOrigin` 或全局 CORS | | JSON 格式错误 | 后端返回内容非法 | 使用 Postman 测试接口 | | 开发阶段跨域 | 前后端端口不同 | 使用代理（Vue/Vite 配置 proxy） | | 生产环境跨域 | 前后端域名不同 | 使用 Nginx 反向代理统一域名 | --- ##