利用jsonp进行跨域已经是老生常谈了。主要原理是浏览器解析<script>
标签的时候,会用script的src属性去发一个网络请求,并将response的东西当做javascript去执行。而浏览器对js脚本并没有做跨域限制。
一个简单的jsonp例子
const url = 'http://www.xxx.com/api/someThing?query=WITH_SOME_DATA&callback=handleResponse'
const scriptElement = document.createElement('script');
scriptElement.src = url;
document.body.appendChild(scriptElement)
JSONP的核心在于下面几点:
+ 创建一个script标签,设置src为要调用的api并且看情况携带一些数据或者指定回调;
+ 将标签添加到html文档中;
+ 浏览器会自动根据src请求数据,并将response理解为Javascript执行。
这里假象了一下如果后端是nodejs的话大概会怎么做:
const callback = req.query.callback;
const data = ... //
const response = `${callback}(${JSON.stringify(data)})`
关键点在于:
后端的返回数据一定是可执行的JavaScript代码!!
后端的返回数据一定是可执行的JavaScript代码!!
后端的返回数据一定是可执行的JavaScript代码!!
所以刚刚我在response那里实际上拼接了一个函数调用。
那么回到浏览器这边,浏览器拿到CALLBACK_NAME(''some data")
那么就开始执行这个函数了。那么同时就要求前端要实现约定的回调函数,并暴露到全局环境
如果换做img标签来做这些事情
同理解析等元素,同样没有对域做安全限制。所以理论上只要能发出跨域的网络请求,都能用来实现跨域。
而大家总会使用script标签来做跨域无非是因为script标签能发出请求,并且能放一些代码放在回应里面,达到回调的效果。
所以理论上来说,如果考虑回调,需要使用script,使用jsonp技术。那么如果只是单纯地想跨域发一个request,那么选择script或者img等元素也无关紧要了。
img其实也能做一些事情
img元素能添加onError
onLoad
属性,用于监听加载失败或者加载成功。
这意味着img实现请求成功或者失败的回调是OK的,但是接收不到server端的数据。