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 相关文章推荐
javascript firefox不显示本地预览图片问题的解决方法
Nov 12 Javascript
javascript 面向对象的JavaScript类
May 04 Javascript
js 页面元素的几个用法总结
Nov 18 Javascript
JavaScript过滤字符串中的中文与空格方法汇总
Mar 07 Javascript
ECMAScript6快速入手攻略
Jul 18 Javascript
Bootstrap导航条的使用和理解3
Dec 14 Javascript
vue2.0多条件搜索组件使用详解
Mar 26 Javascript
移动端手指放大缩小插件与js源码
May 22 Javascript
基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)
Nov 02 Javascript
ant-design-vue 实现表格内部字段验证功能
Dec 16 Javascript
从零使用TypeScript开发项目打包发布到npm
Feb 14 Javascript
Vue router配置与使用分析讲解
Dec 24 Vue.js
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
php5 apache 2.2 webservice 创建与配置(java)
2011/01/27 PHP
PHP中静态变量的使用方法实例分析
2016/12/01 PHP
PHP接口类(interface)的定义、特点和应用示例
2020/05/18 PHP
JavaScript中出现乱码的处理心得
2009/12/24 Javascript
javascript contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
2010/02/04 Javascript
JavaScript prototype属性使用说明
2010/05/13 Javascript
背景图跟随鼠标移动的Mootools插件实现代码
2011/12/12 Javascript
jquery入门—访问DOM对象方法
2013/01/07 Javascript
js为鼠标添加右击事件防止默认的右击菜单弹出
2013/07/29 Javascript
jQuery中attr()方法用法实例
2015/01/05 Javascript
JavaScript实现级联菜单的方法
2015/06/29 Javascript
javascript实现继承的简单实例
2015/07/26 Javascript
移动手机APP手指滑动切换图片特效附源码下载
2015/11/30 Javascript
举例讲解jQuery中可见性过滤选择器的使用
2016/04/18 Javascript
jQuery修改DOM结构_动力节点Java学院整理
2017/07/05 jQuery
关于layui 下拉列表的change事件详解
2019/09/20 Javascript
Centos5.x下升级python到python2.7版本教程
2015/02/14 Python
python对指定目录下文件进行批量重命名的方法
2015/04/18 Python
python实现生命游戏的示例代码(Game of Life)
2018/01/24 Python
VScode编写第一个Python程序HelloWorld步骤
2018/04/06 Python
Python sorted函数详解(高级篇)
2018/09/18 Python
python 五子棋如何获得鼠标点击坐标
2019/11/04 Python
Python实现钉钉订阅消息功能
2020/01/14 Python
python+openCV对视频进行截取的实现
2020/11/27 Python
python openssl模块安装及用法
2020/12/06 Python
Spy++的使用方法及下载教程
2021/01/29 Python
python os.listdir()乱码解决方案
2021/01/31 Python
使用phonegap获取位置信息的实现方法
2017/03/31 HTML / CSS
NYX Professional Makeup英国官网:美国平价专业彩妆品牌
2019/11/13 全球购物
入党申请书自我鉴定
2013/10/12 职场文书
安全资料员岗位职责
2013/12/14 职场文书
大学生优秀自荐信范文
2014/02/25 职场文书
新郎结婚保证书
2015/02/26 职场文书
七一晚会主持词
2015/06/29 职场文书
党员反四风学习心得体会
2016/01/22 职场文书
2019新学期家长会工作计划
2019/08/21 职场文书