axios反向代理proxy个人理解

链接: 官方链接.

使用反向代理proxy的原因

首先需要了解浏览器的同源策略，同源就是说比如你VUE的项目地址是“http://localhost:8080”,而你后端项目启动地址是‘http://localhost:9999’，两者中协议（http）、域名（localhost）相同，但是端口号（：xxxx）vue是8080，而后端是9999不相同，所以产生跨域，需要使用反向代理。（若两者满足协议、域名、端口号相同则不存在跨域问题）。
反向代理在我个人理解就是给你vue项目访问后端资源时给你套上的一个壳，让浏览器认为本次请求是同源的，浏览器就不会进行拦截，数据可以正常返回（类似vpn原理吧）。

proxy基本配置

module.exports = {
	devServer: {
		proxy: {
			'/proxyurl':{
				target:'http://localhost:9999',//起同源作用的url 简单来说就是你要访问的服务器
				//ws: true, 这个是 开启websocket
				changeOrigin: true,//字面意思：更改源点 很多人说是开启跨域 也可以这么理解
				pathRewrite: {
					'^/proxyurl': '' //还有一种写法是'^/proxyurl': '/' 自测
				}
			}
		}
	}
}

//写个最简单的例子用法
//前端项目地址是 http://localhost:8080
//后端项目地址是 http://localhost:9999
	axios.get("/proxyurl/user/getalluser").then(res => {
		console.log(res);
	});

解释这个例子：
显然我们是通过vue项目访问了后端资源，抛开代理单看这段代码，是以http://localhost:8080/proxyurl/user/getalluser请求资源的。
但是有了反向代理，反向代理看到了你这段url中出现了’/proxyurl‘，反向代理起作用，将’/proxyurl‘前面这段’http://localhost:8080‘替换成了’http://localhost:9999‘，这时候请求资源的url变为‘http://localhost:9999/proxyurl/user/getalluser’。
但是我们又配置了一项pathRewrite: {'^/proxyurl': ''}，'^/proxyurl'是正则表达式，它会匹配你url中的字符串。这一选项的代码意思是，将url中的’/proxyurl‘替换为空字符串。则现在的url是http://localhost:9999/user/getalluser

ps
通常我们会将axios封装，可以在创建axios实例时这样写

export function request(config){
    let axiosInstance = axios.create({
        baseURL: '/proxyurl', //在调用时拼接上后面的url就可以了
        timeout: 5000
    });
    return axiosInstance(config);
}