Vue跨域问题如何配置

如果要在vue项目中,通过axios访问Java后台的servelet,就必须解决跨域的问题,因为Java后端我们一般是部署在
tomcat服务器的,但是tomcat服务器所使用的端口一般为8080端口,然而vue项目由运行在另外的服务器上面,所有就
出现了跨不同端口访问的问题,

传统的解决方法虽然简单,但是实现麻烦,都需要在前后端添加一个头信息
前端需要在get方法里面声明一个头信息,例如:
export async function getUsers(){
 	var resp = await axios.get('http://127.0.0.1:8080/mmybatis/user.do',{
	    headers:{ 
	        'Content-Type':'application/x-www-form-urlencoded'
	    }
 	});
    return resp;
}
另外,在Java的servelet中,还需要添加一句:
response.setContentType('application/x-www-form-urlencoded');

但是Vue官方给我们提供了一个更加方便的方法来解决跨域的问题,
我们只需要在vue项目的跟目录下(即与package.json同级的目录),创建一个vue.config.js文件,
文件内容为:
module.exports = {
    lintOnSave:false,
    devServer:{
        port:8081,//前端项目所使用的端口
        proxy: {
            "/api": { // /api 匹配项，匹配拦截；
                target: "http://localhost:8080", //被请求的地址，需要被代理的地址(后台)
                changeOrigin: true,//允许跨域
                pathRewrite: {
                 	//重写配置，被代理的接口会多一个‘/api’的前缀，而原本的接口是没有的，
                    //所以需要通过此项来将接口的前缀‘/api’转换为‘’
                    "^/api": ""  // 此处一般是替换为vue项目名称
                }
            }
        }
    }
}