SpringBoot中到底该如何解决跨域问题

目录

前言1、跨域访问报错2、同源定义3、跨域问题如何解决？4、cors原理5、springmvc中如何解决跨域问题？6、方案1：方法或者类上标注@crossorigin注解7、方案2：全局配置的方式8、方案3：拦截器的方式corsfilter9、案例代码9.1、案例完整代码9.2、接口代码：corscontroller9.3、静态页面：cors.html9.4、将chat21-cores模块发布到tomcat9.5、运行静态页面cors.html9.6、点击第1个按钮，测试跨域正常请求9.7、点击第2个按钮，测试跨域异常请求10、总结

前言

今天又给大家带来了一个很重要的知识点：springmvc中如何处理跨域问题，本文的内容同样适合于springboot

1、跨域访问报错

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。

出于安全原因，浏览器禁止ajax调用驻留在当前原点之外的资源，比如从a.com发送一个ajax请求到b.com，则浏览器控制台会报跨域访问错误。

如下图，从http://localhost:63342/站点页面中向ttp://localhost:8080/chat21/cors/test2发送一个ajax请求，则出现了红色的错误信息，错误中包含了access-controll-allow-origin这样字样的错误，以后看到这个的时候，大家就要一眼看出来这是跨域问题。

2、同源定义

同源策略是浏览器的一个重要的安全策略，它用于限制一个源的文档或其加载的脚本如何与另外一个源进行交互，它能够隔绝恶意文档，减少被攻击的媒介。

如果两个ur人中吕布 马中赤兔l的协议、主机名和端口号都是相同的，那么这两个url就是同源的，否则不同源，不同源的访问就会出现跨域问题，就会出现上面的错误。

下表给出了与 url http://store.company.com/dir/page.html 的源进行对比的示例:

url结果原因http://store.company.com/dir2/other.html同源只有路径不同https://store.company.com/cure.html非同源协议不同http://store.company.com:81/dir/etc.html非同源端口号不同http://news.company.com/dir/other.html非同源主机名不同

也就是说当在http://store.company.com/dir/page.html这个网站中向https://store.company.com、http://store.company.com:81和http://news.company.com三个地址发起axjx请求都会失败并且会报跨域的错误。这就是浏览器的同源策略，只能访问同源的数据。

3、跨域问题如何解决？

跨域问题需要使用cors来解决，请求端和后端接口需要遵循cors规则来通信，便可解决跨域访问的问题。

cors全称cross-origin resource sharing, 即跨域资源共享，是一个由一系列http头组成的系统，这些http头决定浏览器是否阻止前端ja胜是什么意思vascript代码获取跨域请求的响应。为什么需要cors ？这是因为浏览器存在同源安全策略，当我们在当前域请求另外一个域的资源时，浏览器默认会阻止脚本读取它的响应，这时cors就有了用武之地。

跨源资源共享（cors）是由大多数浏览器实现的w3c规范，允许您灵活地指定什么样的跨域请求被授权，而不是使用一些不太安全和不太强大的策略，如iframe或jsonp等。

4、cors原理

cors的原理：简单点说，就是在请求头或响应头中添加了一些配置，通过这些配置来便可轻松解决跨域问题。

想详细了解cors原理的，建议先阅读下面2篇文章，然后再继续向下看，否则，最后你知道springmvc是如何解决的，但是不知道本质的原理是什么。

cors通信：/d/file/titlepic/197浏览器安全策略 & cors：/d/file/titlepic/ppre@restcontrollerpublic class corscontroller { @requestmapping("/cors/test1") @crossorigin public list<string> test1() { list<string> result = arrays.aslist("www.itsoku.com", "spring高手系列", "springmvc系列", "mysql系列", "高并发系列"); return result; } }

7、方案2：全局配置的方式

除了细粒度、基于注释的配置之外，您还可能需要定义一些全局cors配置，这类似于使用筛选器，但可以声明为spring mvc并结合细粒度@crossorigin配置。默认情况下，所有origins and get, head and post methods是允许的。

@enablewebmvc@configurationpublic class mvcconfig implements webmvcconfigurer {     @override    public void addcorsmappings(corsregistry registry) {         //每次调用registry.addmappin可以添加一个跨域配置，需要多个配置可以多次调用registry.addmapping        registry.addmapping("/**")                .allowedorigins("*") //放行哪些原始域                .allowedmethods("put", "delete"，"post", "get") //放行哪些请求方式                .allowedheaders("header1", "header2", "header3") //放行哪些原始请求头部信息                .expodheaders("header1", "header2") //暴露哪些头部信息                .allowcredentials(fal) //是否发送 cookie                .maxage(3600);         // add more mappings...    }}

8、方案3：拦截器的方式corsfilter

//处理跨域的filter//1. 添加 cors配置信息corsconfiguration config = new corsconfiguration();//放行哪些原始域config.addallowedorigin("*");//是否发送 cookieconfig.趣味测试tallowcredentials(fal);//放行哪些请求方式config.addallowedmethod("*");//放行哪些原始请求头部信息config.addallowedheader("*");//暴露哪些头部信息config.addexpodheader("*");//2. 添加映射路径urlbadcorsconfigurationsource corsconfigurationsource = new urlbadcorsconfigurationsource();corsconfigurationsource.registercorsconfiguration("/**",config);

9、案例代码

9.1、案例完整代码

git地址:https://gitee.com/javacode2018/springmvc-ries

9.2、接口代码：corscontroller

corscontroller中有2个接口，第一个接口上标注了@crossorigin注解，可以解决跨域访问的问题，而第二个方法没有标注。

@restcontrollerpublic class corscontroller {     @requestmapping("/cors/test1")    @crossorigin    public list<string> test1() {        list<string> result = arrays.aslist("www.itsoku.com",                "spring高手系列",                "springmvc系列",                "mysql系列",                "高并发系列");        return result;    }     @requestmapping("/cors/test2")    public list<string> test2() {        list<string> result = arrays.aslist("www.itsoku.com",                "spring高手系列",                "springmvc系列",                "mysql系列",                "高并发系列");        return result;    } }

9.3、静态页面：cors.html

静态页面cors.html中添加了2个按钮，点击2个按钮的时候，分别以ajax跨域的方式访问上面2个接口，第1个按钮访问第一个接口，第2个按钮访问第二个接口，然后在浏览器控制台查看效果。

<!doctype html><html lang="en"><head>    <meta chart="utf-8">    <title>cors</title>    <script type="text/javascript" src="jquery-3.6.0.min.js"></script>    <script type="text/javascript">        $(function () {            $("#cors-btn1").click(function () {                $.ajax({                    url: "http://local宋晓波结婚host:8080/chat21/cors/test1",                    success: function (data) {                        console.log(json.stringify(data));                    }                });            });            $("#cors-btn2").click(function () {                $.ajax({                    url: "http://localhost:8080/chat21/cors/test2",                    success: function (data) {                        console.log(json.stringify(data));                    }                });            });        })    </script></head><body><button id="cors-btn1">跨域测试test1</button><button id="cors-btn2">跨域测试test2</button></body></html>

9.4、将chat21-cores模块发布到tomcat

9.5、运行静态页面cors.html

在idea中选中cors.html，然后鼠标右键->run，即可运行

运行效果如下（最好以chrome浏览器运行），idea中支持直接运行静态页面，大家注意这里的端口是63342，而上面tomcat的端口是8080，然后浏览器中按f12打开浏览器控制台，选中console选项卡，稍后在这里可以看到点击按钮验证跨域的效果。

9.6、点击第1个按钮，测试跨域正常请求

再看看下面这个图，正常的跨域请求，响应头多了几个头，主要是access-control开头的头是和cors相关的，浏览器就是根据这些响应头来决定跨域访问是不是正常的，如果没有这些头，浏览器将拒绝读取响应体，然后就报错啦。

9.7、点击第2个按钮，测试跨域异常请求

10、总结

掌握springmvc中解决跨域问题的3种方式

注解的方式：@crossorigin全局配置的方式：webmvcconfigurer接口的addcorsmappings方法中注册cors配置拦截器的方式：corsfilter

到此这篇关于springboot中到底该如何解决跨域问题的文章就介绍到这了,更多相关springboot解决跨域问题内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持www.887551.com！