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

查看 31|回复 0
作者:Gav1nw   
最近写了一个前后端分离的框架,因为涉及到多个 API 的调用,存在跨域的问题,所以使用了 http-proxy-middleware (以下称为 HPM )
版本:
[ol]
  • React 18.2.0
  • HPM 版本 2.0.6 npm 最新版本
    使用 Typescript
    [/ol]
    目标: "/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 => {
        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': '/'
                }
            })
        );
    }
  • 您需要登录后才可以回帖 登录 | 立即注册

    返回顶部