「这是我参与11月更文挑战的第19天，活动详情查看：2021最后一次更文挑战」

vue配置代理服务器

    // 开启代理服务器
    devServer: {
      proxy: 'http://localhost:5000'
    }

   getStudents(){
                axios.get('http://localhost:8080/students').then(
                    response => {
                        console.log('请求成功了',response.data)
                    },
                    error => {
                        console.log('请求失败了',error.message)
                    }
                )
            }

虽然这种方式实现了我们需要的功能，得到了相应的资源，但是这种代理方式不完美的地方有以下两点：

只能配置一个代理，也就是说只能给5000端口转发请求，那么我们如果要再想访问其他服务器数据就办不到了
不能灵活控制是否转发请求（如果自己public文件夹也存在一个students文件，那么代理服务器不会转发请求给5000那个服务器，而是把自己的students文件内容直接交给前端）

// 开启代理服务器 (方式二)
    devServer: {
      proxy: {
        '/api': {
          target: 'http://localhost:5000',
          pathRewrite:{'^/api':''}
          ws: true,   //支持websocket
          changeOrigin: true  //用于控制请求头中的host值，true：对请求服务器撒谎，不告知真实端口号
        },
      }
    }

 getStudents(){
                axios.get('http://localhost:8080/api/students').then(
                    response => {
                        console.log('请求成功了',response.data)
                    },
                    error => {
                        console.log('请求失败了',error.message)
                    }
                )
            }

/api是请求前缀，前端给代理服务器发送一个请求的时候，代理服务器先会查看是否有请求前缀，如果有，这个请求就会走代理，如果没有，就不走代理，target：后面是请求服务器的地址.pathRewrite是重写路径（里面是正则表达式匹配api，然后以空字符串代替），如果不配置这项，请求服务器接收到的请求会是访问/api/students，而这个文件在请求服务器上根本不存在，毫无疑问，会报错的。changeOrigin用于控制是否对请求服务器说谎，用假的host，设置为true时，服务器收到的请求头中的host为：localhost:5000 changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:8080 ，而hangeOrigin默认值为true

方式二存在的优缺点如下：

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

vue配置代理服务器的方式

vue配置代理服务器