请求中 http-proxy-middleware 附加的尾部斜杠

Question

我的 React 应用程序中的

http-proxy-middleware

包遇到问题。使用中间件设置代理时，它会自动在代理请求的末尾添加尾部斜杠（“/”）。我想提供更多背景信息并请求帮助解决此问题。

这是我的 setupProxy.js 文件的内容：

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:5000/',
      changeOrigin: true,
      pathRewrite: {
        "/api": "" // I have also tried using '^/api/': '/' but without success
      }
    }));
};

这是我使用 axios 的自定义 HttpService：

import axios from 'axios';

export const get = (url: string, config?: any) => {
    return axios.get(url, config);
};

export const post = (url: string, data: any, config?: any) => {
    return axios.post(url, data, config);
};

尽管我努力使用 pathRewrite 选项配置代理，但尾部斜杠仍然附加到请求中。这种行为在与代理服务器通信时会导致问题，因为它期望请求没有尾部斜杠 - 最大的问题是当我想传递 URL 参数时，如下所示：

        const generatedParams = generateURLparams(filtersData); //param1=test&param2=test2
        if (generatedParams) {
            get(`api/items?${generatedParams}`).then((res) => {
                setForecastItems([...res.data]);
            });
        }

结果是：

http://localhost:5000/items/?param1=test&param2=test2

，这是不正确的。

我将非常感谢任何有关如何解决此问题的建议或见解。预先感谢您的帮助！

Answer 1

根据https://www.npmjs.com/package/http-proxy-middleware#working-examples

ignorePath：true，应该可以解决你的问题