跨域的原因以及解决方案

简介: 跨域的原因以及解决方案

# 为什么会产生跨域问题



  1. 浏览器限制,目前所有浏览器都实现了同源策略规范。
  2. 请求方式Type为xhr。如果非xhr,如json,script则也不会存在跨域问题
  3. 请求方与服务方的源不同,即跨域,包括:
  1. 协议不同
  2. 域名不同
  3. 端口不同


同时满足三个条件才有可能产生跨域问题。


# 解决方案



  1. 对于浏览器限制的解决方案-关闭浏览器的同源策略
    --args --disable-web-security --user-data-dir
    设置浏览器的启动参数,将浏览器的同源策略取消。该方式要求所用的用户进行手动操作,肯定是不现实的。
  2. 请求方式Type为xhr的解决方案
    既然只有Type为xhr的请求才会存在跨域请求,那么我们是不是可以换一种请求方式呢。Jsonp的实现就是这样。将原本Type是xhr的请求伪造成script请求。
    Jsonp的请求路径后面会自动带上callback参数,服务端可据此判断是否是jsonp请求,将返回值以script的形式进行封装。且服务端需要进行相应的改动。
    对于SpringBoot项目


@ControllerAdvice
public class JsonpAdvice extends AbstractJsonpResponseBodyAdvice{
    public JsonpAdvice{
        super("callback");       //约定的jsonp请求参数
    }
}


  1. JQuery实现jsonp的原理:
    动态创建一个script,通过这个script去请求,请求完,该script即被销毁。可通过对jQuery打断点的方式验证。(可以看到JQuery在网页源代码嵌入了一个临时的script,当Jsonp请求完成之后,该Script即被销毁)


  • 弊端:


  • 服务器需要改动
  • 只支持GET方式 (因为获取script都是GET方式,前端指定请求方式也无效,还以GET方式发起的请求)


  1. 跨域的解决方案


根据实际系统架构来决定使用哪种方式


  1. 被调用方解决返回的响应头的包含允许跨域访问的信息,需要被调用方进行代码的修改。(可由具体应用添加允许跨域信息,也可以由容器,Tomcat,jetty等添加)
  1. 通过Filter实现
  2. 将允许跨域请求的信息配置在nginx或者apache转发服务器


image.png

image.png


2.调用方解决

在调用方与被调用方中间再增加一层,该层做转发,将调用方的请求转发到被调用方。其中第一点因为调用方与该转发层在同一个域名下,所以不会有跨域问题。第二点,由于不是浏览器发起的请求,所以转发层调用被调用方也是不存在跨域问题的(参见跨域的三要素)


image.png

简单请求与非简单请求


当浏览器发起一个跨域请求的时候会先判断是简单请求还是非简单请求。

对于简单请求,浏览器会先请求,拿到结果后再判断是否跨域。

对于非简单请求,浏览器会先发起一个预检options请求,检查通过之后再发起实际的请求。

对于带cookie的跨域请求,

  1. 需要将allowedOrigins设置为具体的origin,而不能使用*
  2. 需要设置响应参数allowCredentials(true),允许带cookie的跨域
目录
打赏
0
0
0
0
0
分享
相关文章
跨域解决方案有哪些?
本文介绍了多种跨域解决方案,包括JSONP、CORS、postMessage、WebSocket、document.domain+iframe、window.name、location.hash、Node.js代理、Nginx代理和CORS Anywhere。每种方法都有其适用场景和优缺点,如JSONP简单但只支持GET请求,CORS安全但兼容性稍差,WebSocket适用于实时通信但需服务器支持。开发者可根据具体需求选择合适的跨域方案。
77 3
跨域解决方案有哪些?
跨域问题产生的原因以及解决方案
【10月更文挑战第9天】跨域问题是前端开发中不可避免的一个问题,了解其产生的原因以及掌握多种解决方案是非常重要的。在实际应用中,需要根据项目的具体情况和需求,选择合适的解决方案,并不断关注跨域问题的发展趋势,以便及时应对新的挑战。
关于跨域,和跨域问题的完整解决方案
关于跨域,和跨域问题的完整解决方案
78 0