Vue脚手架配置代理解决跨域问题

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

前言

在进行web开发进行数据请求的时候常常会遇到跨域问题导致无法请求数据。

如果采用如下方法向http://localhost:4000服务器发送getStudents进行接口数据请求，在后端没有处理跨域问题时可能会遇到如下错误。

出现跨域是因为浏览器的同源策略问题，也就是协议（protocol），主机（host）和端口号（port）有不同的情况。我们本地进行web开发肯定会与后端端口号不同所以会出现跨域问题。

getStudent() {
    axios({
        url: "http://localhost:4000/getStudents",
        method: "GET",
    }).then((res) => {
    	console.log(res.data);
    });
}

跨域.jpg

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': ''}
      }
    }
  }
}

说明：

优点：可以配置多个代理，且可以灵活的控制请求是否走代理。
缺点：配置略微繁琐，请求资源时必须加前缀。