【解决webpack-dev-server 动态配置代理问题】

---

前言

在常规开发中，基本上都会有好几套环境，开发环境dev.com,测试环境test.com。我们在对接不同的环境联调的时候，一般是通过切换target，来实现连接不同的环境。然而，总是需要切换不同的域名，或者与多个后端同事协同开发的时候，经常切换target，那就得经常重启服务，这就让人很难受了。

---

一、devServer-proxy

前端开的时候，本地启动的环境，访问的地址一般都是默认的 localhost+端口，而我们由于业务，需要与不同的环境进行联调，这个时候就有了跨域的问题需要解决，而解决的方式一般是两种，一种是本地用Nginx做代理，另一种就是我们常用的 devServer-proxy。

devServer: {
        proxy: {
            '/api': {
                target: `http://${ip}:9002/`,
                changeOrigin: true,
                pathRewrite: {
                    '^/api': '',
                },
            },
        },
    },

二、配置方式

1. 配置多个代理

有些小伙伴就想，解决经常重启服务问题也很好办，我多配置几个’/api’就可以了，通过axios发起请求的时候，对不同环境，分别配置一个中间路径，这也可以是一个解决办法：

devServer: {
        proxy: {
            '/test-api': {
                target: 'http://test.com/',
                changeOrigin: true,
                pathRewrite: {
                    '^/test-api': '',
                },
            },
            '/dev-api': {
                target: 'http://dev.com/',
                changeOrigin: true,
                pathRewrite: {
                    '^/dev-api': '',
                },
            },
            ...
        },
    },

但是这种方式维护起来很麻烦，也有不小心将开发环境的变量提交到测试环境的风险。

2.使用 http-proxy-middleware 的router

http-proxy-middleware有一个属性 router 它可以动态覆盖target：

// Use `host` and/or `path` to match requests. First match will be used.
// The order of the configuration matters.
router: {
    'integration.localhost:3000' : 'http://localhost:8001',  // host only
    'staging.localhost:3000'     : 'http://localhost:8002',  // host only
    'localhost:3000/api'         : 'http://localhost:8003',  // host + path
    '/rest'                      : 'http://localhost:8004'   // path only
}

// Custom router function (string target)
router: function(req) {
    return 'http://localhost:8004';
}

// Custom router function (target object)
router: function(req) {
    return {
        protocol: 'https:', // The : is required
        host: 'localhost',
        port: 8004
    };
}

// Asynchronous router function which returns promise
router: async function(req) {
    const url = await doSomeIO();
    return url;
}

而我们仅需要这样子配置：

devServer: {
        proxy: {
            '/api': {
                target: 'http://dev.com/',
                //target: 'http://test.com/',
                changeOrigin: true,
                pathRewrite: {
                    '^/api': '',
                },
                router: () => url //URL 会覆盖 target，成为新的代理地址
            },
        },
    },

具体的实现方式就是，在项目的根目录，配置一个target.env 文件，将需要代理的地址，写在这个文件里，然后通过fs去读取target.env里的内容，动态返回给router，从而实现动态切换环境，而不需要重启服务：

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

target.env 的内容默认和proxy的target一样：

 http://dev.com/

需要访问哪个环境，就填入哪个环境的地址就可以了，比如我原本访问的是
http://dev.com ，现在要访问http://test.com/ 。我只需要将文件里的内容替换成 http://test.com/ ，代理就会立即生效，不需要重启。

 http://test.com/

---

总结

动态配置代理,解决开发过程中需要频繁重启服务借还不同环境的问题，能够给我们开发带来极大的便利，提升开发效率。