文章插图
跨域问题现在绝大多数公司的项目都是前后端分离的,前后端分离后势必会遇到跨域问题 。如下图
文章插图
继续debug发现,reponse为undefined,提示消息为Network Error 。
文章插图
所以当你和前端联调的时候一直请求失败,报网络错误,一般情况下是后端没有做跨域配置 。
注意此时并不是后端没有收到请求,而是收到请求了,也返回结果了,但是浏览器将结果拦截了,并且报错 。
同源策略那么浏览器为什么会报错呢?
因为浏览器基于安全考虑而引入的同源策略
文章插图
【配置跨域后,框架帮我们做了什么?】
当协议+域名+端口三者都相同时,才不会产生跨域问题,即同源 。此时才能读取到服务端的响应
当前url请求url 是否跨域
https://www.JAVAshitang.comhttp://www.javashitang.com. 是,协议不同https://www.javashitang.comhttp://book.javashitang.com. 是,域名不同https://www.javashitang.comhttp://www.javashitang.com:8000. 是,端口不同
为什么要有同源策略呢?当然是为了安全起见,举个例子,以银行转账为例,看看你的钱是怎么没的
文章插图
这就是著名的CSRF攻击(跨站请求伪造,当然还有很多其他方式),还有如果第5步不对请求的来源进行校验,那么你的钱已经被转走了
html页面中的如下三个标签是允许跨域加载资源的
- <img src=https://www.isolves.com/it/cxkf/kj/2020-08-13/XXX>
- <link href=https://www.isolves.com/it/cxkf/kj/2020-08-13/XXX>
- <script src=https://www.isolves.com/it/cxkf/kj/2020-08-13/XXX>
JSONPJSONP主要是利用<script>标签将请求发送出去,来实现数据的加载,但这种方式有一个缺点,即只能支持GET请求,其他请求都不能支持,因为JSONP这种方式已经很少使用了,所以不做过多的介绍
CROS非简单请求在正式的跨域请求前,发送一个OPTIONS请求去询问服务器是否接受接下来的跨域请求,携带如下header
Origin:发起请求原来的域Access-Control-Request-Method:将要发起的跨域请求方式(GET/POST/…)Access-Control-Request-Headers:将要发起的跨域请求中包含的请求头字段
服务器在返回中增加如下header来表明是否允许这个跨域请求 。浏览器收到后进行检查如果不符合要求则不会发起后续请求
Access-Control-Allow-Origin:允许哪些域来访问(*表示允许所有域的请求)Access-Control-Allow-Methods:允许哪些请求方式Access-Control-Allow-Headers:允许哪些请求头字段Access-Control-Allow-Credentials:是否允许携带Cookie
简单请求每次都要发送二次请求是不是很麻烦?所以做了优化
当请求方法是HEAD、GET、POST并且请求头只有如下几个时,被定义为简单请求AcceptAccept-LanguageContent-LanguageLast-Event-IDContent-Type:(Application/x-www-form-urlencoded、multipart/form-data、text/plain)
简单请求会在请求中加入Origin头,直接发起请求,不会先询问了 。后端返回相应的header即可
Spring支持跨域理解了跨域的本质,再看各种配置其实就是根据请求往reponse中增加header
利用Filter配置如下Filter,CrossDomainFilter是对javax.servlet.Filter的封装,本质上是一个Filter 。
可以看到我多返回了一个header,Access-Control-Max-Age,他表明了询问结果的有效期限,即在3600s之内浏览器可以不必再次询问
@Component@WebFilter(filterName = "crossDomain", urlPatterns = "/*")public class CrossDomainFilter extends OncePerRequestFilter { @Override protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOException { // 此处可以进行白名单检测 if(CorsUtils.isCorsRequest(request)) { response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin")); response.setHeader("Access-Control-Allow-Credentials", "true"); response.setHeader("Access-Control-Allow-Headers", request.getHeader("Access-Control-Request-Headers")); response.setHeader("Access-Control-Allow-Methods", request.getHeader("Access-Control-Request-Method")); response.setHeader("Access-Control-Max-Age", "3600"); } // 是个OPTIONS请求,header已设好,不用执行后续逻辑,直接return if(CorsUtils.isPreFlightRequest(request)) { return; } filterChain.doFilter(request, response); }}
推荐阅读
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 交换机配置指南半分钟即可掌握关于SSL配置的内容
- 历史上十大妖后 中国古代十大妖姬
- 满族是不是爱新觉罗的后代
- 酒后不要喝茶,喝茶可以解酒吗
- 赛力斯|华为鸿蒙座舱加持 AITO问界M5后驱版上市:售25.98万元
- 亲热后 男人会坦露出这些秘密
- 同房后才能了解他是哪一型男人
- 女人嫁谁都遗憾,男人娶谁都后悔
- 秦统一六国后为什么迅速灭亡
- 长平之战以后为什么没有直接灭赵 历史记载长平之战白起坑杀赵国战败降卒数量是四十万吗