前言
在进行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': ''}}}}}
说明：
优点：可以配置多个代理，且可以灵活的控制请求是否走代理。缺点：配置略微繁琐，请求资源时必须加前缀。
