SpringBoot解决跨域问题

SpringBoot整合WebMvcConfigurer解决前端跨域问题

一.前言

在这之前我们需要了解一下什么是跨域，为什么会出现跨域并复现一下这个问题。

1.1.什么是跨域

当协议、子域名、主域名、端口号中任意一个不相同时，都算作不同域。不同域之间相互请求资源，就算作“跨域”。

1.2.为什么会出现跨域

跨域是指浏览器不能执行来自其它网站的脚本，是由浏览器的同源策略造成的，是浏览器对JavaScript 施加的安全限制。

1.3.问题复现

如果我们没有配置跨域的话，我们通过vue访问我们的后端接口会出现如下错误。

二.解决方式

2.1.解决思路

我们可以使用接口编程的方式进行统一配置。创建配置类实现WebMvcConfigurer，重写addCorsMappings默认实现即可。

2.2.代码实现

我们将下面MyWebConfigurer类的addCorsMappings方法的registry参数的allowedOrigins修改为前端的域名再将其addMapping修改为要访问该域名下的资源。

package com.temperature.humidity.system.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.*;

/**
 * 跨域
 */
@Configuration
public class MyWebConfigurer implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry
                //为url添加映射路径（配置域名下的资源）
                .addMapping("/api/**")
                //配置允许访问的源,*表示允许全部域名。
                .allowedOrigins("http://192.168.10.58:8081")
                //设置允许的请求方式
                .allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE")
                //设置允许的header
                .allowedHeaders("*")
                //设置是否允许发送Cookie，用于凭证请求，默认不发送cookie。
                .allowCredentials(true)
                //设置预检请求的有效时间
                .maxAge(300);
    }

}

三.测试

3.1.访问后端端口

我们通过前端框架访问上述出现问题的后端端口，如下所示。

3.2.后端返回的数据

可以看到后端给我们正常的返回了数据，如下所示。