方法一

在vue.config.js中添加如下配置：

  1. devServer:{
  2.   proxy:"http://localhost:5000"
  3. }

说明：

  1. 优点：配置简单，请求资源时直接发给前端（8080）即可。
  2. 缺点：不能配置多个代理，不能灵活的控制请求是否走代理。

  3. 工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器 （优先匹配前端资源）

    方法二

    编写vue.config.js配置具体代理规则：

    1. module.exports = {
    2.  devServer: {
    3.    proxy: {
    4.    '/api1': {// 匹配所有以 '/api1'开头的请求路径
    5.      target: 'http://localhost:5000',// 代理目标的基础路径
    6.      changeOrigin: true,
    7.      pathRewrite: {'^/api1': ''}
    8.    },
    9.    '/api2': {// 匹配所有以 '/api2'开头的请求路径
    10.      target: 'http://localhost:5001',// 代理目标的基础路径
    11.      changeOrigin: true,
    12.      pathRewrite: {'^/api2': ''}
    13.    }
    14.  }
    15. }
    16. }
    17. /*
    18. changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000
    19. changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:8080
    20. changeOrigin默认值为true
    21. */

    说明：

  4. 优点：可以配置多个代理，且可以灵活的控制请求是否走代理。

  5. 缺点：配置略微繁琐，请求资源时必须加前缀。