1、安装vue jsonp
npm i -S vue-jsonp
2、在main.js中导入vue-jsonp
import VueJsonp from 'vue-jsonp'
通过use方法,挂载到vue中
vue.use(VueJsonp)
3、在组件创建create中,就可以加载数据了。第一个参数是我们的请求地址,第二个是请求带的参数(可以是个对象),它返回给我们的是一个promise对象,可以通过then方法进行调用。filter会把data.focus中的数据,进行过滤,将adddata=null的数据筛选出来,再赋值给swiperList。map可以将得到的数据再进行处理,按照需要的类型统一返回出去
this.$jsonp('http://......').then( data => {
console.log(data);
this.swiperList = data.focus.filter(item =>{
return item.adddata === null;
}).map(item => {
return {
url:item.link,
img:item.pico[0].url,
title:item.title
}
})
}

vue jsonp解决跨域处理的更多相关文章

  1. AJAX跨域问题解决方法(2)——JSONP解决跨域

    JSONP是什么?JSON全称为JSON with Padding,是JSON的一种补充的使用方式,不是官方协议. 使用JSONP服务器后台要改动吗?JSONP不同于一般的ajax请求返回json对象 ...

  2. CORS,jsonp解决跨域问题

    同源和跨域 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web是构建在同源策略基础之上 ...

  3. 搞懂:前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理

    什么是跨域 跨域:一个域下的文档或脚本试图去请求另一个域下的资源 广义的跨域包含一下内容: 1.资源跳转(链接跳转,重定向跳转,表单提交) 2.资源请求(内部的引用,脚本script,图片img,fr ...

  4. 详解Jquery和AngularJs,Servlet中jsonp解决跨域问题(转)

    众所周知,jsonp可以解决跨域问题,下面是我在查阅资料和实际项目使用后的一些总结. Jquery中jsonp的使用 //myUrl = "http://localhost:8090/api ...

  5. vue中解决跨域问题

    方法1.后台更改header header('Access-Control-Allow-Origin:*');//允许所有来源访问 header('Access-Control-Allow-Metho ...

  6. JSONP解决跨域问题,什么是JSONP(转)

    原文链接:https://www.cnblogs.com/xinxingyu/p/6075881.html 说到AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交换数据?第二个是跨域的 ...

  7. jsonp解决跨域问题

    日常开发网页中,时常遇到跨域问题,通常解决办法:后端提供的接口支持jsonp格式,前端采用dataType:jsonp. 一:Jquery封装的AJAX,dataType:jsonp格式的方法: $. ...

  8. vue.js 解决跨域问题

    我们调试vue.js代码的时候一般都用chrome, 下载插件 进入chrome应用商店 搜索 重启chrome就可以解决跨域问题

  9. vue脚手架解决跨域问题-------配置反向代理

    1.打开config/index.js 2.在dev配置对象中找到proxyTable:{} 3.添加如下配置 // 配置反向代理,解决跨域请求 proxyTable: { '/api': { tar ...

随机推荐

  1. HTML语义化的重要性

    语义化标签就是尽量使用有相对应的结构的含义的Html的标签 1.结构更好,更利于搜索引擎的抓取(SEO的优化)和开发人员的维护(可维护性更高,因为结构清晰,so易于阅读). 2.更有利于特殊终端的阅读 ...

  2. 有一段<script>代码,效果是点击<p>就会弹出信息,但是有的<p>点击会有效果,有的没有效果

    问题:有一段<script>代码,效果是点击<p>就会弹出信息,但是有的<p>点击会有效果,有的没有效果 解决: 页面代码是至上而下执行的,如果你的这个标签在< ...

  3. 实用jquery插件

    jquery toast 一个弹窗插件 jquery.form.min.js 一个Ajax表单插件

  4. 提高mysql性能(like搜索替换 )

    一 .mysql用find_in_set代替like搜索提高性能 SELECT * from mobantestinfo1 where find_in_set('33',info2); 二 .使用内部 ...

  5. kivy学习二:做一个查询所在地区身份证前6位的小软件

    经过半个月的尝试,终于成功,记录下来备查! 做完之后发现有很多的问题没有解决,请大佬多批评指教! 强烈建议:学习KIVY的查看官方文档 需要用的知识: 1.字典的相关知识 2.kivy的下拉列表(Dr ...

  6. B1018 锤子剪刀布 (20分)

    B1018 锤子剪刀布 (20分) 大家应该都会玩"锤子剪刀布"的游戏:两人同时给出手势. 现给出两人的交锋记录,请统计双方的胜.平.负次数,并且给出双方分别出什么手势的胜算最大. ...

  7. [Codeforces976E]Well played!(贪心)

    [不稳定的传送门] Solution 首先可以证明,hp翻倍的操作一定是在同一个生物上最优 Code #include <cstdio> #include <algorithm> ...

  8. HTML5 canvas 圆盘抽奖

    使用html5 canvas 绘制的圆盘抽奖程序 效果图: 贴上全部代码:  1 <!DOCTYPE html> <html> <head> <meta ch ...

  9. Ubuntu下配置LAMP + PhpStorm

    本文仅作为一个记录,以下配置在Ubuntu 14.10 64-bit上验证通过. 安装Apache 2:sudo apt-get install apache2 安装成功能够后,通过浏览器访问loca ...

  10. 【转】正则表达式速查表(http://www.jb51.net/shouce/jquery1.82/regexp.html)

    正则表达式速查表 字符 描述 \ 将下一个字符标记为一个特殊字符.或一个原义字符.或一个向后引用.或一个八进制转义符.例如,“n”匹配字符“n”.“\n”匹配一个换行符.串行“\\”匹配“\”而“\( ...