2019年03月15日 作者：管理员 355次浏览
在进行前后端分离项目开发过程中，我们会不可避免的在一些情况下需要进行数据跨域请求，而最常见的就是jsonp方式，先说说jsonp基本原理，用大白话来讲，就是说你将一个js文件去外部引入到页面，不管那个js地址是本地还是远程cdn在线的，我们都是可以引入进来直接使用的，跨域情况下最突出特点就是你在地址栏输入接口地址，是可以拿到后端返回数据的的，但实际去用ajax请求，就控制台提示报错说跨域了不支持，这时候我们可以想象，那如果把接口文件直接像js文件地址那样动态的引入进来，岂不是就可以拿到数据了？这就是最原始基本的jsonp原理，具体可以百度再多了解下。
因为在项目中时长会遇到这个问题，但又不是天天用，所以有时候我也记得不是很清楚，故此抽点时间整理下分享给大家，下面通过实例讲讲如何在项目中利用插件轻轻松松进行跨域jsonp去请求。
可能有的小伙伴还不知道什么是跨域或者不知道当前请求是不是跨域了，没关系，看个图就知道了，当你请求出现如下情况，那就是跨域了
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | //安装方式： npm install fetch-jsonp import fetchJsonp from 'fetch-jsonp'; //示例： //需要跨域的接口：https://dfttdetail.dftoutiao.com/newsmore_h5detail/newspool fetchJsonp('https://dfttdetail.dftoutiao.com/newsmore_h5detail/newspool', { jsonpCallback: 'jsonpcallback', //指定回调的查询字符串的名称（默认callback）,后端可能自定义，比如当前案例约定的是jsonpcallback jsonpCallbackFunction: 'newspool' //回调函数的方法名称 }) .then(function(response) { return response.json(); }) .then(function(json) { that.listData = json.data; }) .catch(function(ex) { console.log('parsing failed', ex); }); |
注意：此插件本身是不支持IE浏览器的，官方有说明，如果想支持IE，还需要接口另一个插件ES6 Promise，具体官方github查看，在地址栏实际请求的应该是这样的。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | //安装方式： npm install jsonp import jsonp from 'jsonp'; //示例： jsonp( 'http://tianqi.eastday.com/data/city/58362.js', { param: 'jsonpcallback', //指定回调的查询字符串的名称（默认callback）,后端可能自定义，比如当前案例约定的是jsonpcallback name: 'weather'//回调函数方法名称 }, function(data) { this.weatherData = data; console.log('天气', data); } ); |
这个插件api官方相对清晰，有好几个参数可设置，如下：
顾名思义，这个插件更适合在vue项目中区使用
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | //在main.js中引入，并作为插件使用 import VueJsonp from 'vue-jsonp' Vue.use(VueJsonp) //请求示例： this.$jsonp( `http://123.59.59.109/peoplerecognition/personpath`, { callbackQuery: 'jsonpcallback', //指定回调的查询字符串的名称（默认callback）,后端可能自定义，比如当前案例约定的是jsonpcallback callbackName: 'jsonpFunc' //回调函数方法名称 } ).then(data => { //console.log("人员行使轨迹", data); }); |
1 2 3 4 5 6 7 8 9 10 11 12 13 | $.ajax({ dataType: 'jsonp', url: 'http://www.a.com/user?id=123', success: function(data){ //处理data数据 } }); |
1 2 3 4 5 | $.getJSON('http://www.a.com/user?id=123&callback=?', function(data){ //处理data数据 }); |
1 2 3 4 5 6 7 8 9 | //此时也可以在函数外定义foo方法 function foo(data){ //处理data数据 } $.getScript('http://www.a.com/user?id=123&callback=foo'); |
可以看出，在使用jsonp过程中主要需要确定一点，和后端约定的查询字符串的名称，回调函数名称是前端自己随意定义的，不同插件只是参数名称有所出入，用法基本一样，另外值得一提的是，jsonp只能通过get的方式去请求数据，也就是通过地址栏拼参数方式请求，希望本文章对大家以后在面对jsonp数据交互时候能够事半功倍。angular1.x跨域请看angular1.2通过$http请求数据及跨域（兼容IE8）
「两年博客，如果觉得我的文章对您有用，请帮助本站成长」
谢谢你请我吃鸡腿*^_^*
支付宝
微信
上一篇：最新Photoshop2019ps软件包下载，附含激活方法
下一篇：超简单原生js判断用户访问来源
确实好用，什么项目都可以使用，屌屌的，多谢分享
评：超好用的时间格式化插件Moment.js终于找到个靠谱的了，这老项目太坑了
评：Angular1x配合ui-router和ocLazyLoad按需加载js谢谢博主，你真给力。
评：web前端开发经典干货视频云盘分享博主 ，Ajax链接：https://pan.baidu.com/s/1vIZD9z3ylY...
评：web前端开发经典干货视频云盘分享资料可以下载，但是播放不了 求打开pbb、miaov文件的方法
评：web前端开发经典干货视频云盘分享博主，视频怎么打开啊，求方法
评：web前端开发经典干货视频云盘分享
共有 0 条评论 - 前端如何优雅的使用jsonp获取接口数据