Spring Boot + Vue 前后端分离项目总结：解决 CORS 和 404 问题

Spring Boot + Vue 前后端分离项目总结：解决 CORS 和 404 问题

在进行前后端分离的项目开发中，我们遇到了几个关键问题：跨域问题 (CORS) 和 404 路由匹配错误。以下是这些问题的详细分析和最终的解决方案。

问题描述

1. 跨域请求被阻止 (CORS)

   • 当前端在 http://localhost:8080 发送 AJAX 请求到后端 http://localhost:3000 时，浏览器由于安全策略阻止了跨域请求。这导致了前端无法获取到后端的数据，出现了 CORS policy 错误。

2. 路径匹配的 404 Not Found 错误

   • 即使解决了跨域问题，前端在请求 http://localhost:3000/pk/getbotinfo 时，后端返回了 404 Not Found 错误。这个错误是因为后端路径和前端请求路径不匹配造成的。

3. Vue Router 的错误拦截

   • Vue Router 报错 No match found for location with path "/pk/getbotinfo"。说明 Vue Router 在前端试图处理 /pk/getbotinfo 这个路径，导致 AJAX 请求没有正确发送到后端。

问题解决方案

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 {

    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public 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: '/' // 将未定义的路由重定向到首页或其他页面
  }
];

最终效果

1. 跨域问题得到解决，前端能够成功请求后端 API。
2. 404 路由问题修复，路径匹配正确，后端能够正常返回数据。
3. Vue Router 不再干扰后端请求，确保 AJAX 请求能直接到达后端。

总结

遇到的问题：

• 跨域 (CORS) 限制。
• 前端和后端路径不匹配导致 404。
• Vue Router 拦截 AJAX 请求。

最终的解决方法：

• 使用 Spring Boot 提供的 WebMvcConfigurer 配置 CORS 规则。
• 后端去掉路径中的末尾斜杠，同时前端请求路径也去掉斜杠，确保一致性。
• 调整 Vue Router 配置，避免不必要的拦截。

按照这些步骤，整个项目的前后端通信问题得到了解决。希望这些总结对你有帮助，并加快你项目的开发进度！