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. MUI常用脚本及原生JavaScript常用操作元素方法

    1.mui元素转换html元素 var obj=mui("#id")[0]; 2.事件绑定 var btn = document.getElementById("logi ...

  2. 使用file_get_contents()和curl()抓取网络资源的效率对比

    使用file_get_contents()和curl()抓取网络资源的效率对比 在将小程序用户头像合成海报的时候,用到了抓取用户头像对应的网络资源,那么抓取方式有很多,比如 file_get_cont ...

  3. POJ 2079 最大三角形面积(凸包)

    Triangle Description Given n distinct points on a plane, your task is to find the triangle that have ...

  4. C语言进阶—— 接续符和转义符13

    接续符的意义: C语言中的接续符 (\) 是指示编译器行为的利器 我们来看一个案例: #in\ clud\ e <st\ dio.h> in\ t m\ ain(\ ) { pri\ nt ...

  5. 3771: Triple

    3771: Triple 链接 题意 n个斧头,每个斧头的价值都不同(开始时没注意到),可以取1个,2个,3个斧头组成不同的价值,求每种价值有多少种组成方案(顺序不同算一种) 分析: 生成函数 + 容 ...

  6. HDU 4576 Robot(概率dp)

    Robot Time Limit: 8000/4000 MS (Java/Others)    Memory Limit: 102400/102400 K (Java/Others)Total Sub ...

  7. 关于 package.json 和 package-lock.json 文件说明

    package.json 在 Node.js 中,模块是一个库或框架,也是一个 Node.js 项目.Node.js 项目遵循模块化的架构,当我们创建了一个 Node.js 项目,意味着创建了一个模块 ...

  8. Trident整合Kafka

    首先编写一个打印函数KafkaPrintFunction import org.apache.storm.trident.operation.BaseFunction; import org.apac ...

  9. Robocopy.exe使用详例

    Robocopy.exe使用详例           Robocopy.exe 是 微软在Windows server 2003 Resource Kit Tools 里面提供的程序来做备份的.Vis ...

  10. 《Cracking the Coding Interview》——第17章:普通题——题目2

    2014-04-28 22:05 题目:写个程序判断三连棋哪一方赢了. 解法:三个相同的棋子连成一条横线,竖线或者对角线就判断为赢了. 代码: // 17.2 Write an algorithm t ...