vue2 笔记9 API服务代理

• 将目标服务器代理到本机开发服务端口，可用于跨域调用数据接口
• 优先取用项目中存在的资源

参考文档

webpack-dev-server
vue-cli-dev-server

配置

vue.config.js

• 单一代理配置

module.exports = {
    devServer: {
        proxy: 'http://apiHost'
    }
}

• 多代理配置

module.exports = {
  devServer: {
    proxy: {
      // 请求前缀
      '/api': {
        // 代理目标地址
        target: 'http://apiHost',
        // 调用代理地址/api/xxx时，将默认将请求转发到http://apiHost/api/xxx
        // 使用路径重写配置，正则表达式匹配起始的/api字符串替换为空字符串''，则将请求转发到http://apiHost/xxx
        pathRewrite: {'^/api':''},
        // 支持websocket
        ws: true,
        // 默认值为true，修改请求头中host值为代理目标地址，值为false时，host值为开发服务器地址
        changeOrigin: true
      },
      '/foo': {
        target: '<other_url>'
      }
    }
  }
}