Vue如果通过vue-cli开启代理服务器

方式一：

在vue.config.js中配置

module.export = {
    // 开启代理服务器
    devServer: {
        proxy: 'http://localhost:5000' // 服务器端口号是多少这个5000对应替换即可
    }
}

如何使用(比如前端端口号是8080， 后端端口号是5000)：
axios.get('http://localhost:8080/students') // 这时候后端地址端口号就要换成前端


缺点：配置简单，请求资源时直接发给前端（8080）即可
优点：不能配置多个代理，不能灵活的控制请求是否走代理
工作方式：若按上述配置代理，当请求了前端不存在的资源，那么该请求会转发给服务器（注意，优先匹配前端资源，即public文件夹下是否有该路径名的文件）

方式二：

在vue.config.js中配置

module.export = {
    // 开启代理服务器
    devServer: {
        proxy: {
            // api代表请求前缀，只要请求前缀是api那么就开启
            'api': {
                target: 'http://localhost:5000',
                pathRewrite: {'^/api': ''}, // 匹配所有的/api正则替换成空字符串，重写路径
                ws: true, // 用于支持websocket
                changeOrigin: false // false代表代理服务器会实话实说自己来自哪里（端口号8080），true代表会撒谎说自己来自于5000
            }
        }
    }
}

如何使用(比如前端端口号是8080， 后端端口号是5000，端口号后面加前缀api)：
axios.get('http://localhost:8080/api/students') // 这时候后端地址端口号就要换成前端

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