React应用Fetch POST请求被识别为GET请求的问题排查

• 强制阻止表单默认提交行为
  在React的onSubmit处理函数里，必须调用e.preventDefault()，否则浏览器会优先执行原生表单提交逻辑（哪怕你用axios发起POST请求），如果表单action配置异常，原生提交就会默认走GET方法。示例代码：

  const handleSubmit = (e) => {
    e.preventDefault(); // 这行是核心，必须添加
    // 后续编写axios.post请求逻辑
  };
  

• 核对表单action属性的准确性
  确保表单action属性的路径和后端POST接口完全一致，比如后端接口是/api/register，前端表单的action也必须是这个值。如果未设置action，浏览器会默认使用当前页面URL，若后端没有对应路径的POST路由，就会触发404。同时注意路径大小写，/Api/Register和/api/register会被视为不同路径。

• 检查提交按钮的类型设置
  确认提交按钮的type="submit"，如果是普通按钮（type="button"）不会触发表单提交；但如果未指定type属性，部分浏览器会默认将按钮识别为submit类型，可能导致意外的原生提交。

• 验证Express路由配置
  确认后端POST路由没有被错误覆盖，比如检查是否将POST路由写在了通配符GET路由之后（虽然HTTP方法不同不会直接覆盖，但需确保路由方法是post而非get）。另外检查是否配置了CORS中间件，跨域场景下OPTIONS预检请求失败也可能引发后续请求异常。

• 通过开发者工具定位请求触发源
  在Chrome Network面板中查看那个GET请求的Initiator字段，确认是原生表单提交还是其他脚本触发了该请求，以此精准定位问题根源。

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