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

Posted 2020-10-16 _林冲

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.get(\'/api/yt_api/login/doLogin\',{
　　params: {
　　　　...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\'

面中的形式为：

 

最新链接：

1、如何在项目里管理好axios请求与vuex

2、 利用vue-cli + vant搭建一个移动端开发模板