跨域的理解以及解决跨域的方式

2 篇文章 0 订阅
2 篇文章 0 订阅

        两个地址如果有相同的协议,域名或者ip,以及端口,那么我们就说这两个地址出自相同的源,浏览器对同源的地址有一个安全策略,就是禁止非同源的数据操作dom,cookie以及接收ajax,所以一旦出现跨域,我们的ajax接收数据就会出现跨域报错.解决这种跨域报错的方案有两种,一种是cors技术解决方案,一种是jsonp技术解决方案。
        cors解决方案完全依赖于后端(我个人对nodejs也有一定的研究,学得不好就别说了),cors后端人员可以直接进行配置,目前常用的ajax版本对cors技术支持就非常好了,我们前端直接调用接口就可以,后端会使用该技术解决跨域。
        而jsonp就有点麻烦了,看起来是类似于ajax请求,他是一个利用script
标签发送请求的一个技术,他是前后端配合,后端返回给前端的数据不是简简单单的一个对象,而是一个执行函数的调用,把需要返回的数据作为参数传给执行函数的参数.然后要求前端必须准备好一个全局的回调函数去接受这个数据,当程序执行完毕后,函数会被销毁,script标签也会被销毁,jsonp的有点是可以兼容低版本的浏览器.缺点是只能发送get请求。
        jsonp: 利用 <script> 标签没有跨域限制的漏洞,网页可以得到从其他来源动态产生的 JSON 数据。JSONP请求一定需要对方的服务器做支持才可以。
        JSONP优点是简单兼容性好,可用于解决主流浏览器的跨域数据访问的问题。缺点是仅支持get方法具有局限性,不安全可能会遭受XSS攻击。
        声明一个回调函数,其函数名(如show)当做参数值,要传递给跨域请求数据的服务器,函数形参为要获取目标数据(服务器返回的data)。
        创建一个`<script>`标签,把那个跨域的API数据接口地址,赋值给script的src,还要在这个地址中向服务器传递该函数名(可以通过问号传参:?callback=show)。
        服务器接收到请求后,需要进行特殊的处理:把传递进来的函数名和它需要给你的数据拼接成一个字符串,例如:传递进去的函数名是show,它准备好的数据是`show('我不爱你')`。
        最后服务器把准备的数据通过HTTP协议返回给客户端,客户端再调用执行之前声明的回调函数(show),对返回的数据进行操作。
        CORS:跨域资源共享(CORS)是一种机制;当一个资源访问到另外一个资源(这个资源放在不同的域名或者不同的协议或者端口),资源就会发起一个跨域的HTTP请求需要浏览器和服务器同时支持;
        1. 整个CORS通信,都是浏览器自动完成。浏览器发现了AJAX请求跨源,就会自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户不会有感觉;
        2. 实现CORS的关键是服务器,只要服务器实现了CORS接口,就可以跨源通信
        3. 服务器对于不同的请求,处理方式不一样; 有简单请求和非简单请求

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值