React登录表单Fetch调用API报错：应为POST却用GET，如何修复？

你的问题核心有两个：一是表单默认触发了GET请求，二是请求方式错误或响应格式问题导致JSON解析失败。我来一步步帮你修正：

关键问题分析 #

1. 表单默认提交行为：HTML表单默认会以GET方式提交并刷新页面，这会中断你的Fetch请求，所以你在Network标签里看到的是GET请求。
2. Fetch配置缺失：Fetch API默认使用GET请求，你需要显式指定method: 'POST'，同时配置正确的请求头和请求体格式。

修改后的完整代码示例 #

import { useState } from 'react';

function LoginForm() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = async (e) => {
    // 第一步：阻止表单默认的GET提交行为，这是关键！
    e.preventDefault();

    try {
      const loginResponse = await fetch('/api/login', {
        // 显式指定请求方法为POST
        method: 'POST',
        // 设置请求头，告知服务器请求体是JSON格式
        headers: {
          'Content-Type': 'application/json',
        },
        // 将用户名和密码转为JSON字符串作为请求体
        body: JSON.stringify({ username, password }),
      });

      // 先检查响应是否成功（状态码在200-299之间）
      if (!loginResponse.ok) {
        // 如果响应失败，先获取文本错误信息（避免JSON解析失败）
        const errorDetails = await loginResponse.text();
        throw new Error(`登录失败: ${loginResponse.status} - ${errorDetails}`);
      }

      const loginData = await loginResponse.json();
      console.log('登录成功！返回数据:', loginData);
      // 这里可以添加登录成功后的逻辑，比如跳转首页、存储token等
    } catch (error) {
      console.error('登录出错:', error.message);
      // 这里可以给用户显示错误提示，比如弹窗或页面内提示
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <div className="form-group">
        <label>用户名</label>
        <input
          type="text"
          value={username}
          onChange={(e) => setUsername(e.target.value)}
          required
        />
      </div>
      <div className="form-group">
        <label>密码</label>
        <input
          type="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          required
        />
      </div>
      <button type="submit">登录</button>
    </form>
  );
}

export default LoginForm;

核心修改点说明 #

• e.preventDefault()：必须在表单提交事件中调用这个方法，阻止浏览器默认的GET提交和页面刷新行为，确保你的Fetch请求能正常发送。
• method: 'POST'：Fetch默认使用GET，所以必须显式指定请求方法为POST，这是让请求变成POST的关键配置。
• 请求头与请求体：设置Content-Type: application/json告诉服务器你发送的是JSON数据，同时用JSON.stringify()把用户输入的对象转为JSON字符串，后端才能正确解析凭证。
• 响应错误处理：先检查response.ok再解析JSON，避免因为后端返回错误状态码（比如401、400）时响应体不是有效JSON，导致出现Unexpected end of JSON input错误。

额外注意事项 #

如果你的后端API不接受JSON格式的请求体（比如用form-data），那你需要调整请求配置：

const formData = new FormData();
formData.append('username', username);
formData.append('password', password);

const loginResponse = await fetch('/api/login', {
  method: 'POST',
  body: formData, // 不需要设置Content-Type，浏览器会自动添加
});

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