MERN栈中Axios PUT请求无法送达服务器问题求助

核心原因 #

你的PUT请求被浏览器中断了——因为<Box component="form">是表单元素，点击提交按钮时，浏览器会触发默认表单提交行为（页面刷新），导致Axios发起的异步PUT请求还没完成就被终止，所以服务器完全没收到请求。这也是为什么Postman/Thunder Client能正常工作（它们不会触发浏览器的表单默认行为）。

修复步骤 #

修改updateMember函数，接收表单提交事件并阻止默认行为：

const updateMember=async(e)=>{
    // 阻止表单默认提交行为，避免页面刷新中断请求
    e.preventDefault();
    
    console.log(`http://localhost:5000/members/${membershipID}`)
    console.log(name,email,membershipID,phone)
    try{
        const res = await axios.put(`http://localhost:5000/members/${membershipID}`,
        {
            name,email,membershipID,phone
        },
        {timeout:5000})

        console.log(res)
        navigate('/members')
    } catch(error) {
            if (error.response) {
                console.log("errror",error.response.data);
                console.log(error.response.status);
                console.log(error.response.headers);
              } else if (error.request) {
                console.log(error.request);

              } else {
                console.log('Error', error.message);
                                  
              }
              console.log('config',error.config);
        }
     }

同时确保Box的onSubmit正确传递事件：

<Box onSubmit={updateMember} component="form" ...>

额外验证点（可选） #

• 检查浏览器Network标签，修复后应该能看到正常发送的PUT请求记录
• 确认membershipID从localStorage获取到有效值，避免请求URL格式错误

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