同事教我SpringBoot解决跨域

发表于

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

写在前面

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

什么是跨域

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

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

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

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

1
2
3
4
5
6
7
8
9
10
java复制代码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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
java复制代码@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

这种也相对比较常见

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
java复制代码/**
 * 解决跨域
 */
@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 解决跨域

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
java复制代码@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利用监听事件，实现异步操作

本文转载自: 掘金

开发者博客 – 和开发相关的 这里全都有

0%