springboot通过实现WebMvcConfig重写addCorsMappings实现跨域问题

前一段时间,在做一个前后端分离项目的时候,发现前端的请求无法发送到后端,并且在浏览器F12控制台中出现以下错误:

这是因为浏览器的同源策略问题，产生了跨域的问题。

产生跨域问题的原因主要是：由于服务器与浏览器之间，存在不同协议、不同域名、不同端口，满足以上任意个条件就会产生跨域的问题。

我是通过在后端中解决这个跨域问题，实现的方式是：实现WebMvcConfig接口，并重写它的addCorsMapping方法。

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    //配置跨域问题
    public void addCorsMappings(CorsRegistry registry) {
        //前端发送的请求路径中，后端中允许哪些路径可以被处理（简单来说：允许哪些RequestMapping的语句被执行）。/**表示：前端发送的所有请求路径，后端都可以执行
        registry.addMapping("/**")
        .allowedHeaders("*")//前端发送的请求中，允许任意请求头访问
        .allowedOrigins("http://localhost:8080")//前端发送的请求中，允许域名为http://localhost:8080访问
        .allowedMethods("GET", "POST", "PUT", "OPTIONS", "DELETE")//前端发送的请求中,允许请求方式"GET","POST","PUT","OPTIONS","DELETE"访问
        .allowCredentials(true)//前端发送的请求中，允许前端携带证书来访问

        //预检请求的最大时间,如果预检请求访问消耗的时间超过最大时间,就重新发送预检请求;
        //预检请求就是在真正的请求发送前,向后端发送的一个前置检查请求，这个请求中携带域名、请求方式、请求头;
        //根据预检请求所收到的响应信息,来判断是否真的要发送真正的请求。
        .maxAge(3600);
    }
}

①定义一个类，加上@Configuration注解，表明这个类是SpringBoot的配置类；实现WebMvcConfigurer接口

②重写addCorsMappings方法，并且调用相应的方法，允许前端的请求发送到后端。