跨域jsonp的原理

在学习jsonp之前首先要明白以下几点:

首先确定为什么要用jsonp,因为要跨域请求数据,那为什么会发生跨域呢,

因为浏览器的同源策略,那什么是同源策略呢浏览器从A网站向B网站请求资源,必须同时满足三点才可以,协议相同,域名相同,端口相同,任何一点不同都会产生跨域,产生跨域后,浏览器就会阻止数据返回。

人们为了满足在不同的域名间传递数据,发明了jsonp技术:

在学习jsonp之前,大家可以思考一下,一张网页中哪些标签是可以跨域请求资源的,我们知道,在页面上有三种资源是可以与页面本身不同源的。它们是:js脚本,css样式文件,图片:

1)<script type="text/javascript" src="某个cdn地址" ></script>

2)<link type="text/css" rel="stylesheet" href="某个cdn地址" />

3)<img src="某个cdn地址" alt=""/>

以上三种资源是可以发生跨域后,而资源可以返回的;

而jsonp就是利用了<script>标签可以链接到不同源的js脚本,来到达跨域目的。当链接的资源到达浏览器时,浏览器会根据他们的类型来采取不同的处理方式,比如,如果是css文件,则会进行对页面 repaint,如果是img 则会将图片渲染出来,如果是script 脚本,则会进行执行,比如我们在页面引入了jquery库,为什么就可以使用 $ 了呢?就是因为 jquery 库被浏览器执行之后,会给全局对象window增加一个属性: $ ,所以我们才能使用 $ 来进行各种处理。

重点:浏览器会根据他们的类型采用不同的处理方式,js文件则会执行。

通常一般我们利用ajax请求某些接口返回的数据,基本都是json格式,而jsonp请求返回的数据,是什么呢,咱们来看一条完整的jsop请求和其返回的数据:

前端工程师通过callback向后端传递了一个abc字符串,后端呢将数据包裹在 abc()中返回,

签名提到过了,浏览器会根据不同的文件类型进行不同的处理,咱们利用的是javascript,所以返回的数据会被解析为,js文件,而上面的数据如果被解析为js文件,就会被执行;

这就是 jsonp 的基本原理,利用script标签的特性,将数据使用json格式用一个函数包裹起来,然后在进行访问的页面中定义一个相同函数名的函数,因为 script 标签src引用的js脚本到达浏览器时会执行,而我们已经定义了一个同名的函数,所以json格式的数据,就作为参数传递给了我们定义的同名函数了。这样就完成了跨域数据交换。jsonp的含义是:json with padding,而在json数据外包裹它的那个函数;

附上封装的jsop的代码:

以上便是利用jquery的风格封装得到jsonp函数,

在和第三方接口调用或者和后端工程师交互式,一定要实现沟通好,向后端传递参数名时,用的什么参数,jquery默认用的是callback,

举个例子:

百度的jsonp用的是

百度用的是cb传递的;

现在咱们看一看上面封装的代码:

有一句非常关键,就是在window上通过变量挂载了一个Cname的属性,而这个属性是个变量,

变量值为一个很长的字符串,而cname这个属性是一个函数,这个函数就是,jsonp返回函数调用后,调用的函数。

原文发布于微信公众号 - nodejs全栈开发(geekclass)

原文发表时间:2019-05-10

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券