1)如何开启代理服务器方法：
1、nginx
2、vue-cli

2）vue-cli开启代理服务器方式一：(这个方法只能开启一个代理服务器)

• 在vue.config.js中配置 :

• module.exports = { devServer: { proxy: 'http://localhost:4000' } }，这样就相当于开启了一个代理服务器，devServer所代理的就是vue-cli手脚架原本开启的端口服务器；proxy表示要把数据发送道哪个端口，其中url只需要写到端口号就可以不必写全部路径

• 说明：
  1. 优点：配置简单，请求资源时直接发给前端(8080)即可
  2. 缺点：不能配置多个代理，不能灵活控制请求是否走代理
  3. 工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器(优先匹配前端资源)

• App.vue中代码：

<template>
  <div>
    <button @click="getStudent">获取学生信息</button>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "App",

  methods: {
    getStudent() {
      //直接看是否响应成功与失败，不设置参数响应头之类的信息
      axios.get("http://localhost:8080/students").then(
        //配置完代理服务器8080 请求url就要写代理服务器的了

        (response) => {
          console.log("请求成功", response.data);
          //aixos中response这个响应对象中data属性才是服务器给的东西
        },
        (error) => {
          console.log("请求失败了", error.message);
        }
      );
    },
  },
};
</script>

• 代理服务器8080不会把所有请求都都会转发给我们后台真实有数据的服务器；当我们请求的资源代理服务器8080本身就有的时候，代理服务器8080就不会把请求发给后台服务器。
• 比如vue中public文件夹就相当于代理服务器8080的根路径，这个根路径里面有的东西是不会再去向后台服务器请求的。也就是pubilc有什么就代表代理服务器本身有什么。
• 所以当public中有的一个文件夹和后端的文件夹重名的时候代理服务器就不会请求后台服务器了，这时候就拿不到我们想要的，这是vue-cli代理服务器的一种缺点。

3）vue-cli开启代理服务器方式二：(解决方式一的两个缺点)

• 再vue.config.js中配置

//方式二开启代理服务器：
    devServer: {
        proxy: {
            // /api 表示请求前缀
          '/api': {
                target: 'http://localhost:5000',
              
              //pathRewrite路径重写，其中有两个参数键值对，第一个写 正则匹配条件，第二个表示 写成什么
                pathRewrite: { '^/api': '' },
                ws: true, //用于支持websocket
                changeOrigin: true, //用于控制请求头中host值(为true时，其请求端口值和后台服务器一样（撒谎）;为false时，请求端口值和代理服务器端口一致(诚实))
            },

            //配置多个代理服务器：就是重复前缀及其后面的内容
            '/demo': {
                target: 'http://localhost:5001',
                pathRewrite: { '^/demo': '' },
                ws: true, 
                changeOrigin: true, 
          },
        //   '/foo': {
        //     target: '<other_url>'
        //   }
        }
      }

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

• 在vue.app里两个代理服务器以及请求的url写法：

<template>
  <div>
    <button @click="getStudent">获取学生信息</button>
    <button @click="getCar">获取汽车信息</button>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "App",

  methods: {
    getStudent() {
      //直接看是否响应成功与失败，不设置参数响应头之类的信息
      axios.get("http://localhost:8080/api/students").then(
        //配置完代理服务器8080 请求url就要写代理服务器的了

        (response) => {
          console.log("请求成功", response.data);
          //aixos中response这个响应对象中data属性才是服务器给的东西
        },
        (error) => {
          console.log("请求失败了", error.message);
        }
      );
    },

    getCar() {
      axios.get("http://localhost:8080/demo/cars").then(
        (response) => {
          console.log("请求成功了", response.data);
        },
        (error) => {
          console.log("请求失败了", error.message);
        }
      );
    },
  },
};
</script>