vue-cli3 axios跨域问题 proxy代理配置

一、安装引入axios

npm install axios -S

安装完后，在main.js中引入axios

//在main.js中添加以下代码
import axios from 'axios'
//axios不支持Vue.use  可以添加原型使用
Vue.prototype.$axios = axios
//下面这条看着加吧，作用是设置url的通用部分，写了之后请求时公共的部分就不用重复写了
//因为下面讲到的代理中的名字是/api 所以/api也是通用部分
//axios.defaults.baseURL = '/api'

二、配置proxy代理跨域

由于vue-cli3简化项目结构，所以需要自己手动创建vue.config.js 详细配置参考

//在项目根目录下(和 package.json 同级)创建vue.confige.js文件,添加如下配置proxy：
module.exports = {
	devServer: {
		proxy: {
			//名字可以自定义，这里我用的是api，注意原请求地址中不能出现这个名字
			'/api': {
				target: 'http://xx.xxxxxx.xxx',//后台接口，请求的目标地址的BaseURL
				changeOrigin: true,//是否开启跨域
				pathRewrite: {
					'^/api': ''//规定请求地址以什么作为开头
				}
			}
		}
	}
}

三、跨域请求

//http://xx.xxxxxx.xxx/test?num=123
this.$axios.get('/test'{
	params:{
		num:123
	}
})
.then(function (res) {
	console.log(res);
})
.catch(function (err) {
	console.log(err);
});