解决SpringBoot和Axios的跨域请求问题

在前后端分离的项目中，前端往往需要用 Axios这样的异步请求工具来对后端进行请求。浏览器的同源策略就限制了不同IP、同一IP不同端口都属于跨域请求。

SpringBoot默认也提供了用于解决跨域请求的注解 @CrossOrigin，但是这个注解是将标头 .allowedOrigins设置为 *，而Axios不允许这样做。所以需要我们自己来配置。

自定义WebMvc配置类

对于更改 WebMvc的配置都需要实现 WebMvcConfigurer，然后重写其中的方法。

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        //所有路径映射
        registry.addMapping("/**")
                //前端项目地址
                .allowedOrigins("http://localhost:5173", "http://localhost:7713", "http://localhost")
                //允许跨域的请求方式
                .allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE")
                //session的过期时间
                .maxAge(3600)
                //是否允许携带cookie
                .allowCredentials(true);
    }
}

前端配置

前端需要为Axios设置允许携带Cookie，不然前端每一次访问都会生成不同的SeesionID。

// Vue中的写法
import axios from "axios";
axios.defaults.withCredentials = true