-
想要理解JSONP,需要先懂得什么是同源什么是跨域Snipaste_2018-01-30_17-54-09.png
- 同源就是:
1.指协议名相同。
2.地址一样(这里需要注意一点,只要是同一个ip地址即可,无需ip地址下的同一个文件夹内,即同一个服务器的不同文件夹下也是同源)。
3.端口号相同。
以上三点有一个不一样就是非同源。 - 不同源之间的网站相互发送请求,我们就称之为跨域。
知道了什么是同源与跨域,那如何解决跨域报错的问题的?
- 首先是最简单的办法,设置Access-Control-Allow-Origin:*;这样就可以进行跨域访问了,相信细心的大伙一经发现了,设置的内容与报错的内容是一致的。但是这种办法的绝点是需要在服务器进行相关设置,这就不是我们能控制的了的,而且这个办法h5才能兼容。所以我们还需要想想其它的办法。
JSONP方法进行跨域
我们知道DOM元素的src属性是支持跨域的,比如我们想把百度搜索到的图片直接扒到自己的网站上直接使用
<img src="www.baidu.com/img/xxxxxxxxxx">就可以在我们的网站上使用了。仔细想想,我们的网站请求了百度的数据,这不就是很标准的跨域么。支持src属性的标签还有script,所以我们也可以利用这一点。进行跨域访问。
具体实现如下:
Snipaste_2018-01-30_19-16-23.png
本质上来讲就是将发送的数据拼成一个回调函数,当数据回来的时候,执行这个回调函数,因为数据从服务器回来之后,相当于内存中要执行拼接而成的js代码,从而实现跨域请求及数据处理。
如果本节内容能帮到大伙,希望大伙点个赞或点个关注,我会不定期的推送一些文章(但是周更是妥妥的)。
