三步完成跨域请求

  ①main.js中: Vue.prototype.HOME = '/api';
  ② config/index.js中:

module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api':{
target:'https://www.baidu.com',
changeOrigin:true,
     pathRewrite:{
'^/api':'/api'
}
}
},
......
}

  主要是proxyTable的修改。

  ③GET请求:

axios({
method:'get',
     url:this.HOME,
}).then(function(resp){
console.log(resp.data);
}).catch(resp=>{
console.log("请求失败"+resp.status+resp.statusText);
});

  ④POST请求

      let data = new FormData();
data.append('uname','xiaowanzi');
data.append('pwd','123456');
axios.post(this.HOME+'/card/sysUserController/isUser.do',data)
.then(res=>{
this.loading = false;
console.log('res=>',res);
this.$router.push({ path: this.redirect || '/' });
},error=>{
this.loading = false;
this.$message.error(error);
console.log('error=>',error);
}

  

 

Vue三步完成跨域请求的更多相关文章

  1. vue.js学习之 跨域请求代理与axios传参

    vue.js学习之 跨域请求代理与axios传参 一:跨域请求代理 1:打开config/index.js module.exports{ dev: { } } 在这里面找到proxyTable{}, ...

  2. VUE系列三:实现跨域请求(fetch/axios/proxytable)

    1. 在 config/index.js 配置文件中配置proxyTable 'use strict' // Template version: 1.3.1 // see http://vuejs-t ...

  3. Vue.js 2.0 跨域请求数据

    Vuejs由1.0更新到了2.0版本.HTTP请求官方也从推荐使用Vue-Resoure变为了 axios .接下来我们来简单地用axios进行一下异步请求.(阅读本文作者默认读者具有使用npm命令的 ...

  4. vue 使用axios 出现跨域请求的两种解决方法

    最近在使用vue axios发送请求,结果出现跨域问题,网上查了好多,发现有好几种结局方案. 1:服务器端设置跨域 header(“Access-Control-Allow-Origin:*”); h ...

  5. 基于vue移动音乐webapp跨域请求失败的问题解决

    在学习一位vue大牛的课程<VUE2.0移动端音乐App开发>时,由于vue的版本原因遇到了一些问题 这是其中之一,花费了很多的时间去解决 虽然搞定了这个问题,但是很多东西理解也不是很到位 ...

  6. $Django 前后端之 跨域问题(同源策略) vue项目(axios跨域请求数据)

    1 跨域问题(多个域之间的数据访问) #同源策略(ip port 协议全部相同) #本站的只能请求本站域名的数据 #CORS实现(跨域资源共享) #实现CORS通信的关键是服务器.只要服务器实现了CO ...

  7. AJAX请求和跨域请求详解(原生JS、Jquery)

    一.概述 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. AJAX = 异步 JavaScript 和 XML,是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数 ...

  8. Vuex、axios、跨域请求处理和import/export的注意问题

    一.Vuex 1.介绍 vuex是一个专门为Vue.js设计的集中式状态管理架构. 对于状态,我们把它理解为在data中需要共享给其他组件使用的部分数据. Vuex和单纯的全局对象有以下不同: 1. ...

  9. vue-cli项目开发/生产环境代理实现跨域请求+webpack配置开发/生产环境的接口地址

    一.开发环境中跨域 使用 Vue-cli 创建的项目,开发地址是 localhost:8080,需要访问非本机上的接口http://10.1.0.34:8000/queryRole.不同域名之间的访问 ...

随机推荐

  1. 牛客练习赛22C Bitset

    牛客练习赛22C 一共有 n个数,第 i 个数是 xi  xi 可以取 [li , ri] 中任意的一个值. 设 ,求 S 种类数. 感觉二进制真是一个神奇的东西. #include <iost ...

  2. 下一个排列(Leetcode31)解读

    本题代码来自Leetcode官方,个人对其理解后,生成自己的注解,以便更好的让读者理解.如有侵权,立即删除! public class Main31 { public static void main ...

  3. HTML5为什么只需要写<!DOCTYPE HTML>?

    HTML4.01中的doctype需要对DTD进行引用,因为HTML4.01基于SGML.而HTML5不基于SGML,因此不需要对DTD进行引用,但是需要doctype来规范浏览器的行为.其中,SGM ...

  4. JavaScript中的this到底是怎样的?

    this是困惑JavaScript开发者的一大‘毒瘤’,在开发过程中,但凡用到this的时候,我们都会很头疼,那么这个this在JavaScript中到底是怎么样的?身为一个前端coder,这是一个避 ...

  5. DirectX12 3D 游戏开发与实战第三章内容

    变换 学习目标 理解如何使用矩阵表示线性变换和仿射变换 学习对几何体进行缩放.旋转和平移的坐标变换 根据矩阵之间的乘法运算性质,将多个变换矩阵合并为一个单独的净变换矩阵 找寻不同坐标系之间的坐标转换方 ...

  6. Apache Hadoop集群安装(NameNode HA + YARN HA + SPARK + 机架感知)

    1.主机规划 序号 主机名 IP地址 角色 1 nn-1 192.168.9.21 NameNode.mr-jobhistory.zookeeper.JournalNode 2 nn-2 192.16 ...

  7. JAVA用递归来判断回文串

    用递归来判断回文串 思路: ①首先如果是空串,一个字符,则判断是回文串 ②若不满足①,则我们需要对字符串进行递归判断,我们会想到要用第一个字符和最后一个字符进行比较,若相同则,第二个和倒数第二个进行比 ...

  8. 神奇的互换身体术--java的类型擦除

    故事背景 <互换身体>是由环球影业发行的喜剧电影,于2011年8月5日在美国上映.该片由大卫·道金执导,瑞安·雷诺兹.杰森·贝特曼.奥利维亚·王尔德等主演.该片讲述了一位居家好男人和一位蜂 ...

  9. select 源码分析

    ## select(2),同步的 I/O 复用 直接看 epoll 的源码把自己绕晕了,先整个简单点的下手. - [使用](#usage) - [源码分析](#src_analysis) ### se ...

  10. Leetcode 121.买股票的最佳时机

    题目描述: 给定一个数组,它的第 i 个元素是一支给定股票第 i 天的价格. 如果你最多只允许完成一笔交易(即买入和卖出一支股票),设计一个算法来计算你所能获取的最大利润. 注意你不能在买入股票前卖出 ...