axios并不像ajax或者vue-resource那样,它默认post是以Request Payload这种形式来传输的,所以第一次用的时候就被坑到了。不过网上很多解决的方法,我直接就放例子了吧...
以下例子都基于vue-cli 快速创建的那个项目
1.安装axios
npm install --save axios
2. 在入口main.js中导入axios 并将axios写入vue的原型,这样就能更简单的使用。
import axios from 'axios'
import Qs from 'qs'
//QS是axios库中带的,不需要我们再npm安装一个
Vue.prototype.axios = axios;
Vue.prototype.qs = Qs;
Ps:Qs这个库是帮助我们解决上面的那个坑的,建议使用...
3.在项目里愉快的使用axios啦
this.axios.post('/api/test',this.qs.stringify({'name':'xiaoming','sex':'nan'}),{
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
})
.then(function(res){
console.log(res.data)
//控制台打印请求成功时返回的数据
//bind(this)可以不用
}.bind(this))
.catch(function(err){
if(err.response) {
console.log(err.response)
//控制台打印错误返回的内容
}
//bind(this)可以不用
}.bind(this))
这段代码可以在vue的mounted钩子或者methos里面使用。this.axios就是上面原型那的效果啦..
'api/test'这里是你要请求的接口。
PS: api 这个我是做了反向代理的(不然的话会跨域),所以上面的 'api/test' 其实是这样的 : http://192.168.X.XX/test. 其中api对应的就是http://192.168.X.XX,当然这个你可以自己改为 www.baidu.com 或者 http://www.zhanxiong.xyz 等等这样的都可以。
Webpack使用代理proxy解决跨域问题
问题
在开发中难免会遇到,自己的端口号和服务器的不一样,导致跨域问题,webpack配置文件中可以有效的解决此问题
豆瓣api | 前端地址 |
---|---|
https://api.douban.com/v2/book/1220562 | http://localhost:8080 |
1、 在webpack.dev.config.js配置文件中dev环境添加以下参数,vue项目中,在根目录config文件夹下,index.js中
proxyTable: {// 当你请求是以/v2开头的接口,则我帮你代理访问到https://api.douban.com
'/v2/*': {
target: 'https://api.douban.com', // 你接口的域名
secure: false, // 如果是https接口,需要配置这个参数
changeOrigin: true, // 如果接口跨域,需要进行这个参数配置
}
},
注意:如果接口地址为:https://api.douban.com/book/1220562,不包含v2,需要把/v2替换为空字符串
proxyTable: {// 当你请求是以/v2开头的接口,则我帮你代理访问到https://api.douban.com
'/v2/*': {
target: 'https://api.douban.com', // 你接口的域名
secure: false, // 如果是https接口,需要配置这个参数
changeOrigin: true, // 如果接口跨域,需要进行这个参数配置
pathRewrite : {
'^/v2': '' //如果接口中不带/v2,需要把/v2替换为空字符串
}
}
},
2、 配置好之后重启下服务
3、直接访问 http://localhost:8080/v2/book/1220562 就可以看到数据了