JSONP解决JS跨域问题的实现


Posted in Javascript onMay 25, 2020

现代编程中前后端都已经是分开部署了,前端有自己的域,后端也有自己的域。由于浏览器同源策略的限制,非同源下的请求,就会产生跨域问题。解决跨域问题的方法有很多种,例如CORS(cross orign resources share)和JSONP。这里我就着重介绍一下jsonp的解决方案。

一:基础概念

同源策略:同一协议,同一域名,同一端口号。只要不满足三者其中一种都是属于跨域问题。

举几个简单的例子

1: https://www.a.com:8080到http://www.a.com:8080的请求会出现跨域(域名、端口相同但协议不同)

2: https://www.a.com:8080到https://www.b.com:8080的请求会出现跨域(协议、端口相同但域名不同)

3: https://www.a.com:8080到https://www.a.com:9090的请求会出现跨域(协议、域名相同但端口不同)

跨域:跨域的安全限制都是对浏览器端来说的,服务器端是不存在跨域安全限制的。浏览器的同源策略限制从一个源加载的文档或脚本与来自另一个源的资源进行交互。

二:区别JSON和JSONP

  • JSON的全称为JavaScript Object Notation,是一种轻量级的数据交互格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。简单来说,json就是一种用来传输数据的数据格式。
  • JSONP是一种非正式传输协议,该协议的一个要点就是允许用户传递一个callback(或者一开始就定义一个回调方法)参数给服务端,然后服务端返回数据时会将这个callback 参数作为函数名来包裹住 JSON 数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。

三:跳出同源的“舒适圈”

我们发现,在web页面调用js文件是不受是否跨域问题的影响的。而且我们还发现凡是拥有 src 这个属性的标签都拥有跨域的能力,比如img和script。在html页面中我们经常会做引入图片的操作,通过img标签中的src属性,我们就可以请求得到一个静态资源。

JSONP解决JS跨域问题的实现

我们可以看到这本质上就是一个GET请求,同理,link和script里的href和src同样可以通过GET请求去请求资源。

<script src="http://localhost:9090/api"></script>

JSONP解决JS跨域问题的实现

我们可以看到这本质上就是一个GET请求,同理,link和script里的href和src同样可以通过GET请求去请求资源。它们并没有受到同源策略的影响,jsonp的实现原理其实就是利用了这个策略的小“bug”,从而实现跨越请求的。既然是一个GET请求,服务器一定可以收到这个请求并作出响应。下面就让我们来具体实现一下吧!

四:原理及跨域实现

具体流程( 原理 )

jsonp的执行流程其实就是简单的两步。第一,在前端预先定义好一个带参数的回调函数用来接受后端传来的数据。第二,在后端启动一个server服务,将要传的数据以定义好了的回调函数名加上返回结果的方式传给前端。

// 前端部分
<script>
  // 1 callback
  // 2 后端 callbackName(数据)
  function onResponse(posts) {
    console.log(posts);
  }
  // 前端没有调用
</script>
<!-- 后端返回结果 -->
<!-- 调用 -->
<script src="http://localhost:9090/api"></script>
//后端部分
const http = require('http');
http.createServer((req, res) => {
  if (req.url === '/api') {
    let posts = ['js', 'php'];
    res.end(`onResponse(${JSON.stringify(posts)})`);
  }
})
.listen(9090, () => {
  console.log(9090)
})

JSONP解决JS跨域问题的实现 

前端script中的src请求完毕以后,后端会给前端返回一个字符串onResponse(["js","php"]),因为script标签的原因,浏览器会把这一段字符串当做js来执行。这样我们一开始在前端定义好了的回调就会执行,我们就拿到数据了。

封装

以上只是有一个简单的请求,实际项目中肯定会有很多个请求,我们肯定不可以定义一排的script标签和回调函数。这样写出来的代码就太不灵活了。封装的目的之一也就是为了前端可以灵活地修改预定义回调函数的名字,而不是在前后端把回调函数定死。同时,把代码封装以后,我们就不用手动地创建回调函数了,封装后的函数会帮我们自动放src的地址,自动创建回调函数名。

// 后端
const http = require('http');
const url = require('url');
http.createServer((req, res) => {
 // /api?callback=onResponse
 // 解析前端请求url中的callback名
 if(req.url.includes('/api')) {
  let myurl = url.parse(req.url);
  let params = new URLSearchParams(myurl.query)
  let posts = ['js', 'php'];
  let mathodName = params.get('callback');
  res.end(`${mathodName}(${JSON.stringify(posts)})`)
 }
})
.listen(9090, () => {
 console.log(9090);
})
// 前端(代码放在body中执行)
<script>
 function jsonp(url, options) {
  // 超时处理
  const { timeout } = options;
  return new Promise((resolve, reject) => {
   // 防止函数名冲突
   let funcName = `jsonp${Date.now()}`;
   let time = null, scriptNode;
   // 定义callback
   window[funcName] = function(data) {
    if (timeout) clearTimeout(time);
    resolve(data);
    // 很重要的性能优化点
    // 清除本次请求产生的回调函数和script标签
    delete window[funcName];
    document.body.removeChild(scriptNode);
   }
   // 创建script标签
   scriptNode = document.createElement('script');
   // 给script标签添加src属性
   scriptNode.src = `${url}?callback=${funcName}`;
   // 发出请求
   document.body.appendChild(scriptNode);
   time = setTimeout(() => {
    reject('network err, timeout')
   }, timeout)
   // 失败
   scriptNode.onerror = function(err) {
   reject(err);
   }
  })
 }
 jsonp('http://localhost:9090/api', {
  callBack: 'res1',
  // 超时处理
  timeout: 3000
 })
 // 请求成功
 .then(res => {
  console.log('jsonp->', res);
 })
 // 请求失败
 .catch(err => {
   console.log("network err!")
 })
</script>

JSONP解决JS跨域问题的实现 

五:总结

1: 优点

  • 它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制
  • 它的兼容性更好,在更加古老的浏览器中都可以运行,不需要XMLHttpRequest或ActiveX的支持
  • 并且在请求完毕后可以通过调用callback的方式回传结果

2: 缺点

只支持GET请求 而不支持POST等其它类型的HTTP请求

它只支持跨域HTTP请求这种情况,不能解决不同域的两个页面之间如何进行JavaScript调用的问题

到此这篇关于JSONP解决JS跨域问题的实现的文章就介绍到这了,更多相关JSONP解决JS跨域内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
为数据添加append,remove功能
Oct 03 Javascript
JavaScript 入门·JavaScript 具有全范围的运算符
Oct 01 Javascript
jquery简单的拖动效果实现原理及示例
Jul 26 Javascript
JavaScript实现弹出子窗口并传值给父窗口
Dec 18 Javascript
JavaScript实现自动变换表格边框颜色
May 08 Javascript
纯js实现手风琴效果
Apr 17 Javascript
JS 实现可停顿的垂直滚动实例代码
Nov 23 Javascript
深入理解Commonjs规范及Node模块实现
May 17 Javascript
深入浅析Vue中的Prop
Jun 10 Javascript
vue中filters 传入两个参数 / 使用两个filters的实现方法
Jul 15 Javascript
jQuery实现获取多选框的值示例
Feb 07 jQuery
vue实现路由懒加载的3种方法示例
Sep 01 Javascript
JS实现时间校验的代码
May 25 #Javascript
使用Typescript和ES模块发布Node模块的方法
May 25 #Javascript
js 动态校验开始结束时间的实现代码
May 25 #Javascript
使用 Opentype.js 生成字体子集的实例代码详解
May 25 #Javascript
Node.js API详解之 repl模块用法实例分析
May 25 #Javascript
微信小程序仿抖音视频之整屏上下切换功能的实现代码
May 24 #Javascript
如何使用vue slot创建一个模态框的实例代码
May 24 #Javascript
You might like
php漏洞之跨网站请求伪造与防止伪造方法
2013/08/15 PHP
phpmyadmin出现Cannot start session without errors问题解决方法
2014/08/14 PHP
Thinkphp实现站点静态化的方法详解
2017/03/21 PHP
javascript 火狐(firefox)不显示本地图片问题解决
2008/07/05 Javascript
JQuery 自定义CircleAnimation,Animate方法学习笔记
2011/07/10 Javascript
JavaScript基础语法让人疑惑的地方小结
2012/05/23 Javascript
js综合应用实例简单的表格统计
2013/09/03 Javascript
浅析jquery的js图表组件highcharts
2014/03/06 Javascript
用js替换除数字与逗号以外的所有字符的代码
2014/06/07 Javascript
Iframe实现跨浏览器自适应高度解决方法
2014/09/02 Javascript
jQuery常用且重要方法汇总
2015/07/13 Javascript
Extjs4.0 ComboBox如何实现三级联动
2016/05/11 Javascript
jQuery Form表单取值的方法
2017/01/11 Javascript
JavaScript使用原型和原型链实现对象继承的方法详解
2017/04/05 Javascript
深入理解jquery的$.extend()、$.fn和$.fn.extend()
2017/07/08 jQuery
vue+vux实现移动端文件上传样式
2017/07/28 Javascript
基于openlayers4实现点的扩散效果
2020/08/17 Javascript
基于iScroll实现内容滚动效果
2018/03/21 Javascript
在 vue-cli v3.0 中使用 SCSS/SASS的方法
2018/06/14 Javascript
vue调试工具vue-devtools安装及使用方法
2018/11/07 Javascript
教你如何将 Sublime 3 打造成 Python/Django IDE开发利器
2014/07/04 Python
酷! 程序员用Python带你玩转冲顶大会
2018/01/17 Python
详解python中list的使用
2019/03/15 Python
通过python实现随机交换礼物程序详解
2019/07/10 Python
python tkinter图形界面代码统计工具(更新)
2019/09/18 Python
Python列表原理与用法详解【创建、元素增加、删除、访问、计数、切片、遍历等】
2019/10/30 Python
Python基于requests实现模拟上传文件
2020/04/21 Python
H5 meta小结(前端必看篇)
2016/08/24 HTML / CSS
The Hut德国站点:时装、家居用品、美容等
2016/09/23 全球购物
党课学习思想汇报
2014/01/02 职场文书
白岩松演讲
2014/05/21 职场文书
英语专业自荐书
2014/06/13 职场文书
法人代表身份证明书及授权委托书
2014/09/16 职场文书
2015年转正工作总结范文
2015/04/02 职场文书
党员干部学法用法心得体会
2016/01/21 职场文书
一篇文章学会Vue中间件管道
2021/06/20 Vue.js