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

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

文章 目录

前言
一、devServer-proxy
二、配置方式
- 1. 配置多个代理
- 2.使用 http-proxy-middleware 的router
总结

前言

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

一、devSer v er–proxy

前端开的时候，本地启动的环境，访问的地址一般都是默认的 localhost+端口，而我们由于业务，需要与不同的环境进行联调，这个时候就有了跨域的问题需要解决，而解决的方式一般是两种，一种是本地用Ngin x做代理，另一种就是我们常用的 devSer v er–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 它可以动态覆盖 tar get：

// 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: () =&gt; url //URL 会覆盖 target，成为新的代理地址
            },
        },
    },

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

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