VUE项目 实现 请求代理

VUE项目 实现 请求代理

1.复杂重复的地址

当我们请求的时候总是要写后端的"http://localhost:8070/ " 地址,就像下面这样

axios.post('http://localhost:8070/login',form).then(resp=> {
	console.log(resp);
)

但是我只想要输入 “/login”

2.设置代理

项目根目录创建 vue.config.js

let proxyObj = {}

proxyObj['/'] = {
    //websocket
    ws: false,
    //目标地址==============就是改这里，改成后端的地址
    target: 'http://localhost:8070',
    //发送请求头host会被设置成target
    changeOrigin: true,
    //不重写请求地址
    pathRewrite: {
        '^/': '/'
    }
}


module.exports = {
    devServer: {
    	//设置外部局域网可以联机本机
        host: '0.0.0.0',
        //本项目的端口
        port: 8080,
        proxy: proxyObj
    }
}

3.重启项目，再次访问

axios.post('/login',form).then(resp=> {
	console.log(resp);
)