先来介绍Jsonp跨域
-
Jsonp全称是Json with Padding,和Json没有关系
-
Json是一种数据交换格式,而Jsonp是一种依靠开发人员聪明才智创造出的一种费官方跨域数据交换协议。json是描述信息的格式,jsonp是信息传输的协议
在页面上直接发送一个跨域的ajax请求四不可以的,但是,在网页上引入不同域上的js脚本却是可以自由访问的。
于是,人们想到了利用这个漏斗可以很好的解决跨域请求:后端不返回json格式的数据,而是返回一段调用某个函数的js代码,供前端来调用处理,使用跨域。
-
众所周知,后端一般给前端返回json数据,而使用Jsonp的特殊就在于前端后传递一个callback参数(key)给后端,接着后端返回数据是会将这个callback参数的值(value)作为函数来包裹住json数据,最终返回给前端就是一段js代码了,这样就巧妙的解决了跨域问题
我遇到的坑
本来自己在开发一个桌面端应用,因为只有一个接口,而且是get请求,遇到了跨域问题,那么我第一反应是使用jsonp来解决跨域,最简单的方法。
结果我没有请求到数据,报了如下错误
jsonp跨域请求报错Uncaught SyntaxError: Unexpected token :
这到底怎么回事,我的请求地址也没有问题,也没有‘:’这个符号呀,到底怎么回事。
经过我查阅各种文献发现,jsonp跨域请求,**需要和后端协商,*也就是
传递一个callback参数(key)给后端,接着后端返回数据是会将这个callback参数的值(value)作为函数来包裹住json数据,最终返回给前端就是一段js代码了
然后呢,我立马去找后端人员,让他别给我返回json格式的数据了,我们公司的高级后端,于是就开始研究jsonp跨域,改个接口,给我改了半天,一个月几万的人。
改了半天还没有给我改过来,后来他发现,后端另一个人把返回的数据进行了封装,导致返回的还是json的代码,最后他终于改过来了。
害,我还一直以为是前端的问题。浪费我这么久时间。
总结
本来以为jsonp是最简单的解决跨域的方式,结果给我遇到这么多问题,耗费了好多时间和精力,我恨呀。