React网络请求（axios）根据不同的请求前缀分发不同的网络地址

我们可能有这样的需要，如果axios的的请求前缀不同话，在自己设置的反向代理就不起作用了。因为只能固定一个请求前缀，所以我提供了两种解决方法，都需要在.setupProxy.js中设置 ：

第一种：直接复制app.use的重新复制一份，重新写一个路由规则

    /* app.use(
        "/api",//所有以/api开头的请求, 都会走这个代理
        proxy({
            // 此处的端口号要与后期数据请求的数据端一致
            target: "http://121.89.205.189:3000",
            changeOrigin: true,
        })
    );
    app.use(
        "/city",//所有以/city开头的请求, 都会走这个代理
        proxy({
            // 此处的端口号要与后期数据请求的数据端一致
            target: "http://121.89.205.189:3000",
            changeOrigin: true,
        })
    );
    app.use(
        "/abc",//所有以/abc开头的请求, 都会走这个代理
        proxy({
            // 此处的端口号要与后期数据请求的数据端一致
            target: "http://121.89.205.189:3000",
            changeOrigin: true,
        })
    ); 

第二种：通过网络的路径重写进行设置一个伪路径，然后需要在axios的的基准路径设置伪路径

app.use(
        "/hg",//所有以/hg开头的请求, 都会走这个代理,但是/hg是我们添加的虚拟前缀,需要在请求转发时去除掉
        proxy({
            // 此处的端口号要与后期数据请求的数据端一致
            target: "http://121.89.205.189:3000",
            changeOrigin: true,
            pathRewrite:{ '^/hg':'/' }//路径重写,以/hg开头的部分会被重写为 /
        })
    );

上面的代码需要在.setupProxy.js，下面的代码需要在axios的封装里面的bease路径中设置

var service = axios.create({
    timeout: 10*1000, //超时时间
    baseURL: '/hg',//基准路径(往往是所有请求地址的公共前缀)
})