Axios post请求/editDoc返回404错误，代理正常其他同类型接口可运行

问题诱因 #

• 核心原因是你误触发了无参的接口调用，代理规则未匹配到异常请求，导致请求直接打到前端所在的3000端口，而3000端口不存在/editDoc接口所以返回404。你代码里写了两个编辑按钮：

// 这个是无效按钮，调用editById时仅传了id参数，无其余必填字段，且没有显示控制逻辑，大概率你误点了这个按钮触发请求
<button
  onClick={(e) => {
    e.preventDefault();
    editById(idFromListServicesPage);
  }}
>
 Edit
</button>

// 这个才是你需要的受控提交编辑按钮，会传递完整参数
{showEditButton && (
  <button onClick={(e) => onClickEdit(e, idFromListServicesPage)}>Submit Edit</button>
)}

• 次要原因是myData初始值为空对象，输入框初始加载时值为空，部分代理配置（比如create-react-app默认proxy）只会转发符合预期格式的正常请求，空参的异常请求不会走代理转发规则。

解决方法 #

按顺序执行以下修改即可：

1. 直接删除上述无效的Edit按钮，避免误触，仅保留受控的Submit Edit按钮。
2. 给myData设置初始默认值，避免初始空值导致的输入框异常：

// 把原来的空对象初始值替换成带字段的默认值
const [myData, setMyData] = useState({
  site: '',
  content: '',
  updatedByCNUM: ''
});

3. 确认后端3001端口的/editDoc接口请求方法是POST，路径拼写无大小写、拼写错误。
4. 如果修改后仍然报错，可以临时写全请求路径验证问题根源：

// 临时替换接口路径，如果能请求成功说明是代理配置问题
axios.post('http://localhost:3001/editDoc', {
  id: id,
  location: site,
  content: content,
  updatedByCNUM: updatedByCNUM
})

如果全路径请求正常，检查你的代理配置是否只匹配了带特定前缀的路径（比如/api/*），调整代理规则或者给所有接口路径加上对应前缀即可。

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