React中http-proxy-middleware自动添加尾斜杠问题求助

问题分析 #

你的请求api/items?param1=test&param2=test2被代理后变成http://localhost:5000/items/?param1=test&param2=test2，核心原因是：

• http-proxy-middleware默认的autoRewrite配置与target末尾的斜杠共同作用，自动给路径添加尾斜杠
• 原路径重写规则不够精确，无法正确处理带参数的URL

解决方案 #

1. 调整代理配置（最直接修复） #

修改setupProxy.js，调整target格式、路径重写规则，并关闭自动重写和重定向跟随：

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

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:5000', // 移除target末尾的斜杠
      changeOrigin: true,
      pathRewrite: {
        // 精确匹配/api开头的路径，保留后续所有内容（包括参数）
        '^/api(/.*)?': '$1'
      },
      autoRewrite: false, // 关闭自动路径重写，避免自动添加尾斜杠
      followRedirects: false // 禁止跟随服务器重定向，防止重定向导致的斜杠添加
    })
  );
};

2. 优化Axios请求处理（辅助修复） #

在你的HttpService中，统一配置axios并添加请求拦截，提前修正URL格式：

import axios from 'axios';

// 创建axios实例，统一配置baseURL减少路径错误
const axiosInstance = axios.create({
  baseURL: '/api'
});

// 请求拦截器：自动修正带参数的URL，移除多余尾斜杠
axiosInstance.interceptors.request.use(config => {
  if (config.url) {
    // 替换 "/?" 为 "?"，解决带参数时的尾斜杠问题
    config.url = config.url.replace(/\/\?/, '?');
    // 移除路径末尾无参数的多余斜杠
    config.url = config.url.replace(/\/$/, '');
  }
  return config;
});

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

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

3. 检查目标服务器配置 #

如果以上方法无效，确认后端服务器是否存在自动重定向规则（比如将/items重定向到/items/）。如果有，要么在后端关闭该重定向，要么保持代理的followRedirects: false配置，避免代理跟随重定向改变路径。

验证 #

修改配置后，发起请求get('items?param1=test&param2=test2')（因设置了baseURL，无需再写/api前缀），请求会被代理为http://localhost:5000/items?param1=test&param2=test2，符合服务器要求。

内容的提问来源于stack exchange，提问作者D.Zet