【Vue脚手架中跨域代理的配置】

在日常开发中，我们经常会遇到需要解决跨域问题的情况。而在Vue脚手架中，提供了配置项以进行配置。

这里我们希望为'/student'以及'teacher'两个接口配置代理。

首先找到vue.config.js配置文件

module.exports = {
//加上如下代码
  devServer: {       //开启代理服务器 配置多个代理
    proxy: {
      '/api': {       //'/api'是自行设置的请求前缀
        target: 'http://localhost:5000',
        pathRewrite:{'^/api':''},  //路径重写，（正则）匹配以api开头的路径为空（将请求前缀删除）
        ws: true,//用于支持websocket
        changeOrigin: true //用于控制请求头中的host值
      },
  }
 }

上述代码中，配置了一个匹配所有前缀为/api的请求。也就是所有以/api为头的请求都会走上面配置的代理，向http://localhost:5000这个服务器发送请求。但是最前面我写的两个接口为'/student'和'/teacher'，他们并不会走代理。

如何解决呢？

我们可以利用axios的二次封装，给所有的请求都添加上/api这个前缀（这个前缀是可以随意命名的）

const requests = axios.create({
  //配置对象
  //基础路径，在发送请求时，路径当中会出现api
  baseURL:'/api',
  //代表请求超时的时间
  timeout:5000
});

此时我们点击按钮发送的请求为:

http://localhost:8081/api/student
http://localhost:8081/api/teacher

通过代理服务器的target属性加工之后我们原先的请求就变为了:

http://localhost:5000/api/student
http://localhost:5000/api/teacher

以上，代理配置完成。