同事教我SpringBoot解决跨域

这是我参与11月更文挑战的第17天，活动详情查看：2021最后一次更文挑战

写在前面

今天我们来聊聊如何解决跨域，聊解决跨域之前，首先应该知道什么是跨域。

什么是跨域

通俗讲，你浏览器中输入的域名请求的资源当中，其中又有不同的域名去请求其他资源去了，这种存在不同域名请求的称之为跨域。

比如我们前端工程师在浏览器输入localhost进入前端工程开始调整逻辑，但是接口地址调用的是后端的api工程，会出现跨域。

比如我们常用nginx解决跨域（今天我们主要学习SpringBoot解决跨域）

nginx在本地启动，比如拦截80端口，给个拦截，然后转发到真实的api接口服务

server {
        listen       80;
        server_name  ;

        #定义拦截api
        location /api {
            proxy_pass http://www.web.server/web-api/;
            index  index.html index.htm index.jsp;
        }
    }
复制代码

比如我们要访问www.web.server/web-api 这个线上服务，那浏览器直接输入localhost/api 即可。

好的稍带提下nginx 后面我们进入正题，SpringBoot解决跨域的几种姿势

实现 WebMvcConfigurer

这种比较经典，用的可能比较多

@Configuration
public class CorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        //所有请求都放过
        registry.addMapping("/**")
                //默认同域
                .allowedOrigins("*")
                //所有请求放过
                .allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS")
                .allowCredentials(true)
                .maxAge(3600)
                .allowedHeaders("*");
    }
}
复制代码

重新注入 CorsFilter

这种也相对比较常见

/**
 * 解决跨域
 */
@Configuration
public class CorsFilterConfig {


    /**
     * 开启跨域访问拦截器
     *
     * @date 2021/4/29 9:50
     */
    @Bean
    public CorsFilter corsFilter() {
        //创建CorsConfiguration对象后添加配置
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        //设置放行哪些原始域
        corsConfiguration.addAllowedOrigin("*");
        //放行哪些原始请求头部信息
        corsConfiguration.addAllowedHeader("*");
        //放行哪些请求方式
        corsConfiguration.addAllowedMethod("*");

        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        //2. 添加映射路径
        source.registerCorsConfiguration("/**", corsConfiguration);
        return new CorsFilter(source);
    }
}
复制代码

创建一个 filter 解决跨域

@Slf4j
@Component
@WebFilter(urlPatterns = { "/*" }, filterName = "headerFilter")
public class HeaderFilter implements Filter {
    @Override
    public void doFilter(ServletRequest request, ServletResponse resp, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) resp;
        //解决跨域访问报错
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "POST, PUT, GET, OPTIONS, DELETE");
        //设置过期时间
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, client_id, uuid, Authorization");
        // 支持HTTP 1.1.
        response.setHeader("Cache-Control", "no-cache, no-store, must-revalidate");
        // 支持HTTP 1.0. response.setHeader("Expires", "0");
        response.setHeader("Pragma", "no-cache");
        // 编码
        response.setCharacterEncoding("UTF-8");
        chain.doFilter(request, resp);
    }

    @Override
    public void init(FilterConfig filterConfig) {
        log.info("跨域过滤器启动");
    }

    @Override
    public void destroy() {
        log.info("跨域过滤器销毁");
    }
}
复制代码

好了。今天关于后端如何解决跨域的就讲到这里也欢迎大家在下方评论其他方案

总结

我们开头所讲的都是一些关于比如前端如何解决跨域。下面我简单总结几点前端如何解决跨域，大家下面可以了解下

1、通过jsonp跨域
2、 document.domain + iframe跨域
3、 location.hash + iframe
4、 window.name + iframe跨域
5、 postMessage跨域
6、跨域资源共享（CORS）
7、 nginx代理跨域
8、 nodejs中间件代理跨域
9、 WebSocket协议跨域

这里就不一一展开赘述了，后面有时间再展开讨论

OK。我们下期再见，加油！

弦外之音

感谢你的阅读，如果你感觉学到了东西，您可以点赞，关注。也欢迎有问题我们下面评论交流

加油！我们下期再见！

给大家分享几个我前面写的几篇骚操作

copy对象，这个操作有点骚！

干货！SpringBoot利用监听事件，实现异步操作