【vue cli2 3】 本地代理解决跨域问题

一、vue-cli2

在config/index.js中修改proxyTable：

module.exports = {dev: {// PathsassetsSubDirectory: 'static',assetsPublicPath: '/',// proxyTable: {},//原来为空proxyTable: {//这里自定义'/api': { //自己命名target: "https://xxx.com", //要代理的网址changeOrigin: true, //是否跨域pathRewrite: {'^/api': "https://xxx.com" //重写路径}},},.....},.....
}

在定义接口的文件中（一般是src/request/api.js）：

const url = '/api'; //上一步自己起的名字//  接口定义
export const register = data => {return request.post(url + "/register", data);
};

二、vue-cli3

修改根目录下的vue.config.js：

module.exports = {.....// webpack-dev-server 相关配置devServer: {host: '0.0.0.0',port: '80',// 自动打开浏览器open: true,proxy: {'/':{  //自命名changeOrigin: true,target:'https://xxx.com/', //要代理的域名}},....},....
}

修改src/utils/request.js：

// 创建axios实例
const service = axios.create({baseURL: '/', //上面的自命名// 超时timeout: 20000,
})