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 - HTML的request类
Jul 15 Javascript
JS解析json数据并将json字符串转化为数组的实现方法
Dec 25 Javascript
不用锚点也可以平滑滚动到页面的指定位置实现代码
May 08 Javascript
javascript读取Xml文件做一个二级联动菜单示例
Mar 17 Javascript
借助javascript代码判断网页是静态还是伪静态
May 05 Javascript
Jquery自定义button按钮的几种方法
Jun 11 Javascript
实例分析js和C#中使用正则表达式匹配a标签
Nov 26 Javascript
javascript中typeof操作符和constucor属性检测
Feb 26 Javascript
基于javascript实现单选及多选的向右和向左移动实例
Jul 25 Javascript
Bootstrap实现基于carousel.js框架的轮播图效果
May 02 Javascript
通过一次报错详细谈谈Point事件
May 17 Javascript
vue 解决遍历对象显示的顺序不对问题
Nov 07 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
声音就能俘获人心,蕾姆,是哪个漂亮小姐姐配音呢?
2020/03/03 日漫
PHP中的switch语句的用法实例详解
2015/10/21 PHP
PHP微信API接口类
2016/08/22 PHP
php微信公众账号开发之前五个坑(一)
2016/09/18 PHP
php微信开发之百度天气预报
2016/11/18 PHP
PHP基于Closure类创建匿名函数的方法详解
2017/08/17 PHP
PHP实现会员账号单唯一登录的方法分析
2019/03/07 PHP
Laravel基础_关于view共享数据的示例讲解
2019/10/14 PHP
php与js的区别是什么
2013/08/05 Javascript
js的window.showModalDialog及window.open用法实例分析
2015/01/29 Javascript
利用JS实现数字增长
2016/07/28 Javascript
js判断数组key是否存在(不用循环)的简单实例
2016/08/03 Javascript
Vue二次封装axios为插件使用详解
2018/05/21 Javascript
JS前端模块化原理与实现方法详解
2020/03/17 Javascript
浅谈Python中chr、unichr、ord字符函数之间的对比
2016/06/16 Python
python 与GO中操作slice,list的方式实例代码
2017/03/20 Python
python使用tensorflow保存、加载和使用模型的方法
2018/01/31 Python
利用numpy和pandas处理csv文件中的时间方法
2018/04/19 Python
如何理解Python中包的引入
2020/05/29 Python
python和go语言的区别是什么
2020/07/20 Python
Python request中文乱码问题解决方案
2020/09/17 Python
使用Python绘制台风轨迹图的示例代码
2020/09/21 Python
python 牛顿法实现逻辑回归(Logistic Regression)
2020/10/15 Python
15个Pythonic的代码示例(值得收藏)
2020/10/29 Python
jupyter notebook更换皮肤主题的实现
2021/01/07 Python
HTML5实现可缩放时钟代码
2017/08/28 HTML / CSS
S’well Bottle保温杯官网:绝缘不锈钢水瓶
2018/05/09 全球购物
黄色火烈鸟:De Gele Flamingo
2019/03/18 全球购物
企业管理专业个人求职信范文
2013/09/24 职场文书
学院领导推荐信
2013/10/30 职场文书
酒店副总经理岗位职责范本
2014/02/04 职场文书
党员先锋岗事迹材料
2014/05/08 职场文书
自荐信怎么写
2015/03/04 职场文书
2015年学生会干事工作总结
2015/04/09 职场文书
介绍信怎么写
2015/05/05 职场文书
《没有任何借口》读后感:完美的执行能力
2020/01/07 职场文书