Insomnia调用接口正常但浏览器返回204(cancelled)无法获取200响应

问题根因 #

你前端代码中，触发提交的按钮设置了type="submit"，且放在<form>标签内部。点击按钮时会首先触发浏览器原生的表单默认提交行为，触发页面重载/跳转，此时你发起的axios异步请求还未接收响应就被强制取消，所以网络面板会显示cancelled状态。由于请求已经成功发送到服务端，所以数据库会正常写入测试数据。

解决方案 #

提供两种可行方案，任选其一即可：

方案1：阻止表单默认提交行为 #

在提交触发函数中新增事件阻止逻辑，更推荐使用表单的onSubmit事件绑定提交逻辑，符合前端表单操作规范：

1. 调整提交函数，新增阻止默认行为的逻辑：

let addUser = (e) => {
  // 新增该行阻止表单默认提交
  e.preventDefault();
  axios
    .post(`http://localhost:3000/users/signup`, {
      firstName: "testFirstName",
      lastName: "testLastName",
      email: "testEmail@gmail.com",
      password: "testPassword",
    })
    .then((res) => {
      console.log(res);
      console.log(res.data);
    })
    .catch((e) => {
      console.log(e);
    });
};

2. 将提交逻辑绑定到form的onSubmit事件上，无需单独给按钮绑定点击事件：

return (
  <form onSubmit={addUser}>
    ... 
    <button type="submit">submit</button>
    ...
  </form>
);

方案2：修改按钮类型 #

直接将提交按钮的type改为button，该类型的按钮放在form内部不会触发默认提交行为：

<button type="button" onClick={addUser}>submit</button>

额外注意事项 #

服务端返回的成功提示拼写有误：Succcessfully多写了一个c，如果需要和你预期的返回字符串完全一致，可以手动调整修正。

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