React 下的 http-proxy-middleware 转发错误

[Gav1nw]

最近写了一个前后端分离的框架，因为涉及到多个 API 的调用，存在跨域的问题，所以使用了 http-proxy-middleware （以下称为 HPM ）

版本:

1. React 18.2.0
2. HPM 版本 2.0.6 npm 最新版本 使用 Typescript

目标: "/map_services/v1/getVersion" -> "http://localhost:8810/v1/getVersion"

问题: 1. /map_services 确实被代理了，但后端服务器显示请求的是"http://localhost:8810/map_services/v1/getVersion" 即 PathRewrite 并没有生效 2. 我发起的是 POST 请求，但后端服务器显示收到的是 GET 请求

后端请求

export const getVersion = async (): Promise<string> => {
    return await http("/map_services/v1/getVersion", {
        method: HTTP_METHODS.POST,
        data: {}
    }).then((response) => {
        if (response.data !== "") {
            return response.data;
        }
        return "null";
    })
}
const http = async (url: string,
    {data, headers, ...customConfig}: IConfig = {})=>{
 数据处理就不写了
 ···

 return await window.fetch(url, config).then(async (res) => {
        let dataRes: IRemoteResponse = await res.json();
        if (dataRes.info !== SUCCESS_FLAG) {
            return Promise.reject({message: "Bad Request!"});
        }
        if (dataRes.info) {
            return dataRes;
        } else {
            return Promise.reject(dataRes);
        }
    });

}

setupProxy.js

const {createProxyMiddleware} = require('http-proxy-middleware');
module.exports = function (app) {
app.use(
        '/map_services',
        createProxyMiddleware({
            target: 'http://localhost:8810',
            PathRewrite: {
                '^/map_services': '/'
            }
        })
    );
}

[abelyao]

试试 target: 'http://localhost:8810/'
以 / 结尾，然后去掉 PathRewrite

[wzdsfl]

我在项目里是这么设置的
```
'/api/example': {
target: 'http://example.com',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api\/example/, '')
},
```

[7anshuai]

PathRewrite -> pathRewrite ，大小写问题？

[Gav1nw]

看了一下真的是！！！太感谢了