Heroku部署Node.js后端遇双斜杠路径问题，POST请求返回404错误

排查前端请求路径拼接逻辑 #

• 检查React中发起请求的代码，比如用fetch或axios时，是否存在基础URL末尾带斜杠 + 接口路径开头带斜杠的重复拼接情况：

  // 错误示例：重复斜杠来源
  const baseUrl = process.env.REACT_APP_API_URL + '/';
  axios.post(`${baseUrl}/api/portfolios/getportfolios`, data)
  

  改成两种正确写法之一：

  // 写法1：基础URL末尾不带斜杠，接口路径开头带斜杠
  const baseUrl = process.env.REACT_APP_API_URL;
  axios.post(`${baseUrl}/api/portfolios/getportfolios`, data)
  

  // 写法2：基础URL末尾带斜杠，接口路径开头不带斜杠
  const baseUrl = process.env.REACT_APP_API_URL + '/';
  axios.post(`${baseUrl}api/portfolios/getportfolios`, data)
  

后端路由与路径规范化处理 #

• 确保后端路由定义无重复斜杠，保持标准格式：app.post('/api/portfolios/getportfolios', (req, res) => { ... })。
• 若前端与后端同部署，检查express.static静态文件配置路径是否正确，避免路径拼接异常：

  app.use(express.static(path.join(__dirname, 'client/build')));
  

• 可添加全局中间件自动清理重复斜杠，兼容意外的路径拼接错误：

  app.use((req, res, next) => {
    req.url = req.url.replace(/\/+/g, '/'); // 把多个连续斜杠替换为单个
    next();
  });
  

Heroku环境与构建配置检查 #

• 确认React项目的REACT_APP_API_URL环境变量值为https://ayush-portfolio-backend.herokuapp.com（末尾不带斜杠），避免构建时生成错误路径。
• 查看Heroku构建日志，验证前端构建过程中环境变量是否正确注入，无路径拼接错误。

验证步骤 #

1. 修改代码后重新部署前后端到Heroku
2. 查看Heroku日志，确认请求路径变为/api/portfolios/getportfolios而非双斜杠版本
3. 用Postman直接测试https://ayush-portfolio-backend.herokuapp.com/api/portfolios/getportfolios的POST请求，先确认后端接口本身正常

内容的提问来源于stack exchange，提问作者Ayush