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. JAVA / MySql 编程—— 第四章 高级查询(二)

    1.        EXISTS和NOT EXISTS子查询:EXISTS关键字用来检测数数据库对象是否存在.                  ★EXISTS和NOT EXISTS的结果只取决于是否 ...

  2. java基础不牢固容易踩的坑

    java基础不牢固容易踩的坑 经过一年java后端代码以及对jdk源码阅读之后的总结,对java中一些基础中的容易忽略的东西写下来,给偏爱技术热爱开源的Coder们分享一下,避免在写代码中误入雷区. ...

  3. python__基础 : 类的继承,调用父类的属性和方法

    1.继承,调用父类属性方法 在python里面,继承一个类只需要这样写: class Animal: def heshui(self): print('动物正在喝水') class Cat(Anima ...

  4. python学习之字符串转换

    配置环境:python 3.6   python编辑器:pycharm 代码如下: #!/usr/bin/env python #-*- coding: utf-8 -*- def strCase() ...

  5. R-描述性统计

    RT...老实说这一章我是抖的...但是,加油- # 从1:100中均匀抽取size个数据,replace=TRUE指有放回抽样,数据可以重复 x = sample(1:100, size = 100 ...

  6. [USACO1.5] 回文质数

    P1217  Prime Palindromes 题目描述 因为151既是一个质数又是一个回文数(从左到右和从右到左是看一样的),所以 151 是回文质数. 写一个程序来找出范围[a,b](5 < ...

  7. 将Mnist手写数字库转化为图片形式 和标签形式

    Mnist 数据文件有两种,一种是图片文件,一种是标签文件,那么如何把他们解析出来呢? (1)解析图片文件 可以看出在train-images.idx3-ubyte中,第一个数为32位的整数(魔数,图 ...

  8. git的使用入门

    写作目的: 快速的上手git版本控制+github神器进行基本的版本同步操作. 怎么做? 对于任意一个代码项目,使用git_bash进入到代码目录 如果没有进行过初始化操作:应当使用git init  ...

  9. 全方位认识HDMI接口技术

    HDMI接口并不是一个开放的标准.制造商必须向HDMI标准制定协会支付版税,来换取一个生产许可证.不过这个版税可不便宜,每年要交纳15000美元的许可费,并且更黑的是每生产一个HDMI接口就要支付0. ...

  10. 9 10mins的投票功能

    1.投票的原理 2.投票的数据结构设计 (1)准备工作 导入detail页面 配置静态文件 <link rel="stylesheet" href="../stat ...