前言
在进行web开发进行数据请求的时候常常会遇到跨域问题导致无法请求数据。
如果采用如下方法向http://localhost:4000服务器发送getStudents进行接口数据请求，在后端没有处理跨域问题时可能会遇到如下错误。
出现跨域是因为浏览器的同源策略问题，也就是协议（protocol），主机（host）和端口号（port）有不同的情况。我们本地进行web开发肯定会与后端端口号不同所以会出现跨域问题。
getStudent(){axios({url:"http://localhost:4000/getStudents",method:"GET",}).then((res)=>{console.log(res.data);});}vue提供两种方法来解决跨域问题。
Vue配置代理方式一
官网：
简单的配置可以采用如下方法，即将要请求的协议、地址和端口号配置在文件里，就可以进行访问了。
在vue.config中添加如下配置：
devServer:{proxy:'http://localhost:4000'}说明：
优点：配置简单，请求资源时直接发送给前端（8080）即可
缺点：不能配置多个代理，不能灵活的控制是否走代理。
工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器（优先匹配前端资源）
Vue配置代理方式二
如果web应用有多个接口去请求数据，或者前端有与接口同名的资源被阻拦了可以采用以下方式进行配置。
注意：请求的地址需要在端口号后面加上一个自定义的名称，在配置文件里需要加上pathRewrite: {'^/api1': ''}再去掉地址中的名称。
getStudent(){axios({url:"http://localhost:5000/api1/getStudents",method:"GET",}).then((res)=>{console.log(res.data);});}编写vue.config.js配置具体代理规则：
module.exports={devServer:{proxy:{'/api1':{//匹配所有以'api1'开头的请求路径target:'http://localhost:5000',//大力目标的基础路径ws:true,pathRewrite:{'^/api1':''}//发送请求的地址再去掉'api1'前缀changeOrigin:true},'/api2':{//匹配所有以'api2'开头的请求路径target:'http://localhost:5001',pathRewrite:{'^/api2':''}}}}}说明：
优点：可以配置多个代理，且可以灵活的控制请求是否走代理。
缺点：配置略微繁琐，请求资源时必须加前缀。