Spring Boot + Vue 前后端分离项目总结：解决 CORS 和 404 问题
Spring Boot + Vue 前后端分离项目总结：解决 CORS 和 404 问题
在进行前后端分离的项目开发中，我们遇到了几个关键问题：跨域问题 (CORS) 和 404 路由匹配错误。以下是这些问题的详细分析和最终的解决方案。
问题描述
-
跨域请求被阻止 (CORS)
- 当前端在
http://localhost:8080发送 AJAX 请求到后端http://localhost:3000时，浏览器由于安全策略阻止了跨域请求。这导致了前端无法获取到后端的数据，出现了CORS policy错误。
- 当前端在
-
路径匹配的
404 Not Found错误- 即使解决了跨域问题，前端在请求
http://localhost:3000/pk/getbotinfo时，后端返回了404 Not Found错误。这个错误是因为后端路径和前端请求路径不匹配造成的。
- 即使解决了跨域问题，前端在请求
-
Vue Router 的错误拦截
- Vue Router 报错
No match found for location with path "/pk/getbotinfo"。说明 Vue Router 在前端试图处理/pk/getbotinfo这个路径，导致 AJAX 请求没有正确发送到后端。
- Vue Router 报错
问题解决方案
1. 解决跨域问题 (CORS)
错误原因：
- 浏览器的跨域安全策略默认阻止了前端和后端不同域的请求。需要在后端配置允许跨域。
解决方法：
- 删除之前自定义的 CORS 过滤器
CorsConfig，使用 Spring Boot 官方推荐的WebMvcConfigurer配置 CORS。
最终代码：
package com.kob.backend.config;import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;@Configuration
public class GlobalCorsConfig {@Beanpublic WebMvcConfigurer corsConfigurer() {return new WebMvcConfigurer() {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**").allowedOrigins("http://localhost:8080") // 允许前端源.allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS").allowedHeaders("*").allowCredentials(true).maxAge(3600);}};}
}
2. 解决 404 Not Found 路由问题
错误原因：
- Spring Boot 默认对路径大小写敏感，且路径末尾的斜杠可能导致路由无法匹配。后端路径和前端请求路径不一致，是导致
404错误的原因。
解决方法：
- 后端控制器：去掉路由末尾的
/，并使用@GetMapping注解来清晰地定义 GET 请求。
最终代码：
@RestController
@RequestMapping("/pk") // 删除了 "/pk/" 末尾的斜杠
public class IndexController {@GetMapping("/getbotinfo") // 去掉末尾的 "/"public List<Map<String, String>> getBotInfo() {List<Map<String, String>> list = new LinkedList<>();Map<String, String> bot1 = new HashMap<>();bot1.put("name", "bot1");bot1.put("rating", "1500");Map<String, String> bot2 = new HashMap<>();bot2.put("name", "bot2");bot2.put("rating", "1500");list.add(bot1);list.add(bot2);return list;}
}
- 前端请求： 去掉 AJAX 请求 URL 中的末尾
/。
最终代码：
$.ajax({url: "http://localhost:3000/pk/getbotinfo", // 去掉末尾的斜杠type: "GET",success: resp => {console.log(resp);if (resp.length > 0) {let firstBot = resp[0];bot_name.value = firstBot.name;bot_rating.value = firstBot.rating;}},error: err => {console.error("Failed to load resource:", err);}
});
3. 处理 Vue Router 拦截问题
错误原因：
- Vue Router 试图处理
/pk/getbotinfo路径，导致 AJAX 请求被拦截。
解决方法：
- 在 Vue Router 配置中添加
catch-all路由，确保没有被定义的路径不会被前端拦截。
最终代码：
const routes = [// 其他路由{path: '*',redirect: '/' // 将未定义的路由重定向到首页或其他页面}
];
最终效果
- 跨域问题得到解决，前端能够成功请求后端 API。
404路由问题修复，路径匹配正确，后端能够正常返回数据。- Vue Router 不再干扰后端请求，确保 AJAX 请求能直接到达后端。
总结
遇到的问题：
- 跨域 (CORS) 限制。
- 前端和后端路径不匹配导致
404。 - Vue Router 拦截 AJAX 请求。
最终的解决方法：
- 使用 Spring Boot 提供的
WebMvcConfigurer配置 CORS 规则。 - 后端去掉路径中的末尾斜杠，同时前端请求路径也去掉斜杠，确保一致性。
- 调整 Vue Router 配置，避免不必要的拦截。
按照这些步骤，整个项目的前后端通信问题得到了解决。希望这些总结对你有帮助，并加快你项目的开发进度！