为何同一PUT接口在特定前端页面触发代理错误，其他页面正常？

这个问题的核心大概率是相对路径的请求在不同前端路由下被错误解析，导致代理转发了错误的路径到后端，触发了ECONNRESET错误。下面是具体的排查和解决步骤：

1. 修正axios请求的路径写法 #

你当前的请求代码是：

axios.put(`workout/${workoutId}`, newValues)

这种相对路径写法会根据当前页面的URL自动拼接路径：

• 在http://localhost:8101/workouts/list页面，可能你的代理配置刚好兼容了拼接后的路径；但在/workout-started/WKsp5Odze1WuAGm6txWx页面，请求会被解析为http://localhost:8101/workout-started/workout/${workoutId}，这个路径后端没有对应的接口，代理转发后就会出现连接重置错误。

解决方法很直接：给路径加上开头的斜杠，改成绝对路径：

axios.put(`/workout/${workoutId}`, newValues)

这样不管当前页面在哪个路由下，请求都会从域名根路径开始拼接，生成正确的http://localhost:8101/workout/${workoutId}，代理就能正确转发到后端接口。

2. 用浏览器DevTools验证实际请求路径 #

打开浏览器开发者工具（F12），切换到Network面板，触发出错的请求，查看Request URL字段，确认是不是被错误拼接成了/workout-started/workout/xxx。如果是，就坐实了相对路径的问题。

3. 检查axios全局baseURL配置 #

如果你在全局配置了axios的baseURL，确保它是绝对路径（比如/api或者http://localhost:8101），而不是相对路径。相对路径的baseURL同样会根据当前页面路由拼接，导致请求路径错误。

4. 确认代理配置的正确性 #

如果你的项目用了setupProxy.js或者package.json里的proxy字段，检查是否有针对/workout路径的转发规则，确保它不会被前端路由的路径影响。比如setupProxy.js的正确配置示例：

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

module.exports = function(app) {
  app.use(
    '/workout',
    createProxyMiddleware({
      target: 'https://us-central1-traineraid-283616.cloudfunctions.net/api',
      changeOrigin: true,
    })
  );
};

这样所有以/workout开头的请求都会被正确转发，不受当前前端路由的影响。

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