码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2017-12-06 18:17:17      阅读:423      评论:0      收藏:0      [点我收藏+]

标签:跨域   local   技术分享   exp   com   注意   接口   blog   nbsp   

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

一:跨域请求代理

1:打开config/index.js

module.exports{
    dev: {
    }
}

在这里面找到proxyTable{},改为这样:

proxyTable: {
      ‘/api‘: {
        target: ‘http://121.41.130.58:9090‘,//设置你调用的接口域名和端口号 别忘了加http
        changeOrigin: true,
        pathRewrite: {
          ‘^/api‘: ‘‘//这里理解成用‘/api’代替target里面的地址,后面组件中我们掉接口时直接用api代替 比如我要调用‘http://40.00.100.100:3002/user/add‘,直接写‘/api/user/add’即可
        }
      }
    }

2:在需要调接口的组件中这样使用:

axios.post(‘/api/yt_api/login/doLogin‘,postData)
	.then(function (response) {
		console.log(1)
		console.log(response);
	})
	.catch(function (error) {
		console.log(error);
	})

  注意:原接口:http://http://121.41.130.58:9090/yt_api/login/doLogin

      页面调用:http://localhost:8081/api/yt_api/login/doLogin ——这里多了一个/api/不是多余的,不要删

 

二:axios传参

1:Vue官方推荐组件axios默认就是提交 JSON 字符串,所以我们要以json字符串直接拼接在url后面的形式,直接将json对象传进去就行了

let postData = {
	‘companyCode‘:‘tur‘,
	‘userName‘:‘123456789123456789‘,
	‘password‘:‘123456‘
}
axios.post(‘/api/yt_api/login/doLogin‘,postData)
	.then(function (response) {
		console.log(1)
		console.log(response);
	})
	.catch(function (error) {
		console.log(error);
	});

这里我们将postData这个json对象传入到post方法中,页面中的形式为:

技术分享图片

 

2:以key:val的形式传参

let postData = qs.stringify({
	companyCode:‘tur‘,
	userName:‘123456789123456789‘,
	password:‘123456‘
})

我们需要对这个json对象操作,这里的qs你需要先安装

npm install qs

再导入

import qs from ‘qs‘

面中的形式为:

技术分享图片

 

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

标签:跨域   local   技术分享   exp   com   注意   接口   blog   nbsp   

原文地址:http://www.cnblogs.com/momozjm/p/7993236.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!