利用jsonp进行跨域已经是老生常谈了。主要原理是浏览器解析标签的时候,会用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 = https://www.it610.com/article/url;
document.body.appendChild(scriptElement)
【javascript|漫谈JSONP以及的onLoad和onError事件】JSONP的核心在于下面几点:
+ 创建一个script标签,设置src为要调用的api并且看情况携带一些数据或者指定回调;
+ 将标签添加到html文档中;
+ 浏览器会自动根据src请求数据,并将response理解为Javascript执行。
这里假象了一下如果后端是nodejs的话大概会怎么做:
const callback = req.query.callback;
constdata = https://www.it610.com/article/... //
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端的数据。
推荐阅读
- 操作系统|[译]从内部了解现代浏览器(1)
- web网页模板|如此优秀的JS轮播图,写完老师都沉默了
- JavaScript|vue 基于axios封装request接口请求——request.js文件
- vue.js|vue中使用axios封装成request使用
- JavaScript|JavaScript: BOM对象 和 DOM 对象的增删改查
- JavaScript|JavaScript — 初识数组、数组字面量和方法、forEach、数组的遍历
- JavaScript|JavaScript — call()和apply()、Date对象、Math、包装类、字符串的方法
- JavaScript|JavaScript之DOM增删改查(重点)
- javascript|vue使用js-xlsx导出excel,可修改格子样式,例如背景颜色、字体大小、列宽等
- javascript|javascript中的数据类型转换