利用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标签来做这些事情
同理解析<img>等元素，同样没有对域做安全限制。所以理论上只要能发出跨域的网络请求，都能用来实现跨域。
而大家总会使用script标签来做跨域无非是因为script标签能发出请求，并且能放一些代码放在回应里面，达到回调的效果。
所以理论上来说，如果考虑回调，需要使用script，使用jsonp技术。那么如果只是单纯地想跨域发一个request，那么选择script或者img等元素也无关紧要了。
img其实也能做一些事情
img元素能添加onError onLoad 属性，用于监听加载失败或者加载成功。
这意味着img实现请求成功或者失败的回调是OK的，但是接收不到server端的数据。
网友评论