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

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

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

自定义WebMvc配置类

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


@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。

1
2
3


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