配置代理

方式一

• 在vue.config.js中添加配置:

module.exports = {
  devServer: {
    proxy: 'https://www.baidu.com'
  }
}

说明:

• 优点: 配置简单, 请求资源时直接发给前端即可
• 缺点: 不能配置多个代理, 不能灵活的控制请求是否走代理

工作方式:

• 当请求了前端已存在的资源时, 会直接从前端拿去数据, 不会转发给服务器
• 当请求了前端不存在的资源时, 那么该请求会转发给服务器
• 优先匹配前端资源

方式二

• 在vue.config.js中添加配置:

devServer: {
  proxy: {
    '/api': {
      target: 'https://www.baidu.com',
      pathRewrite: {'^/api': ''}, // 根据正则匹配路径并重新
      ws: true, // 支持 websocket, 默认 true
      changeOrigin: true // 控制请求头中的 host 值, 默认 true
    },
    '/demo': {
      target: 'https://www.jd.com',
      pathRewrite: {'^/demo': ''},
      ws: true,
      changeOrigin: true
    }
  }
}

说明:

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