小虾虎鱼

小虾虎鱼

webpack-dev-server做代理时动态配置代理地址

作者 禾惠 发表于 2021/04/05 23:23 ,最后修改于 2021/04/05 23:25

在前端项目开发时,本地启动项目可能使用的地址localhost+端口,然后后端给出的api接口可能是外网的地址(例如dev.api.com),前端直接使用可能会存在跨域问题,解决方法有两种:一种是后端直接设置允许跨域,另一种是做反向代理。 前端做反向代理可以使用NGINX,也可以使用webpack-dev-server。使用webpack-dev-server做代理的配置如下:

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://dev.api.com',
        pathRewrite: {'^/api' : ''}
      }
    }
  }
}

使用上面的配置即可实现代理。但是公司项目遇到这样一种情况,我们还有一个对应测试环境的地址test.api.com,在开发中每次切换域名时都需要重新启动脚本,很麻烦,于是花了点时间看了一下http-proxy-middleware的文档发现有一个router参数可用(router参数会覆盖target):

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://dev.api.com',
        pathRewrite: {'^/api' : ''},
        router: () => url // 只要控制url变量就可以实现动态配置代理地址
      }
    }
  }
}

那如何动态控制url?我们可以将url保存到一个文件中,然后动态读取文件。 我们在项目的根目录下创建 .env 文件,将dev.api.com保存在文件中,然后修改代码(下面是简单实现方式,建议通过监听文件修改去动态控制url)

const fs = require('fs')

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://dev.api.com',
        pathRewrite: {'^/api' : ''},
        router: () => {
          return fs.readFileSync(process.cwd() + '/.env', 'utf8')
        }
      }
    }
  }
}

这时修改 .env 文件内容为test.api.com,代理会立即生效不需要重新启动脚本。

我欣赏你的好品味~

打开微信扫一扫