React表单提交出现404：意外发送GET请求而非POST

你遇到的核心问题是没有阻止表单的默认提交行为，导致浏览器自动发起了默认的GET请求，而非你期望的axios POST请求。

具体分析 #

当点击表单的Submit按钮时，浏览器会触发默认的表单提交逻辑：

• 如果表单没有显式指定method属性，默认会使用GET方法
• 会将表单数据拼接在URL末尾，提交到当前页面的路径（也就是你路由里的/orders）

而你的Flask后端仅在/orders/<user_id>路径上处理POST请求，这个默认的GET请求自然匹配不到对应的路由，所以返回了404，也就出现了你看到的"GET /orders?client=Ozorio&email=ozo%40gmail.com..."日志。

修复步骤 #

1. 阻止表单默认行为 #

在handleSubmitOrder方法的最开头添加event.preventDefault()，这样就能拦截浏览器的默认提交逻辑，转而执行你编写的axios POST请求：

handleSubmitOrder(event) {
  // 优先阻止浏览器默认提交行为
  event.preventDefault();
  
  const {userId} = this.props
  const data = {
    client: this.state.formClient.client,
    email: this.state.formClient.email,
  };
  var headers = {
    'Content-Type': 'application/json',
    Authorization: `Bearer ${window.localStorage.authToken}`
  }
  const url = `${process.env.REACT_APP_WEB_SERVICE_URL}/orders/${userId}`;
  axios.post(url, data, {headers: headers})
    .then((res) => {
      console.log(data);
      // 这里可以添加提交成功后的逻辑，比如页面跳转、成功提示等
    })
    .catch((err) => {
      // 记得添加错误处理，比如提示用户提交失败
      console.error(err);
    });
};

2. （可选但推荐）显式设置表单method属性 #

为了代码更规范、避免歧义，给form标签加上method="POST"属性：

<form 
  method="POST"
  onSubmit={ (event) => this.handleSubmitOrder(event) }
>

3. 修复JSX中的注释语法错误 #

你在input标签里使用了//注释，这在JSX语法中是无效的，可能会导致组件渲染异常，影响表单状态绑定。应该改用JSX专用的注释语法{/* 注释内容 */}：

<input 
  name="client" 
  className="input is-dark is-large" 
  type="text" 
  placeholder="Client name" 
  required 
  {/* value={this.state.formClient.client} onChange={this.handleOrderFormChange} */}
/>

4. 确认userId的传递有效性 #

确保userId正确传递到了Orders组件中，这样axios请求的URL/orders/${userId}才是合法的，避免后端因为路径不匹配返回错误。

完成以上操作后，表单提交就会触发你预期的axios POST请求，而非默认的GET请求，404的问题就能解决了。

内容的提问来源于stack exchange，提问作者8-Bit Borges