如何在Fetch POST请求中使用查询字符串？React登录验证遇用户不存在错误

你的问题核心在于请求体的格式错误，导致后端Passport无法正确解析用户名和密码参数。

错误原因 #

你用new URLSearchParams(JSON.stringify(data))处理请求体，这会把JSON字符串直接转成URL编码格式，最终发送的请求体是类似{"Username":"xxx","Password":"xxx"}=这样的无效格式——后端根本找不到Username和Password字段，自然返回"No such user"。

两种修正方案 #

方案1：直接用URLSearchParams构造表单格式请求体（适配后端默认表单解析）

const handleSubmit = (event) => {
    event.preventDefault();

    // 直接用URLSearchParams添加参数
    const formData = new URLSearchParams();
    formData.append('Username', username);
    formData.append('Password', password);

    fetch('https://cthulhuflix.onrender.com/login', {
      method: 'POST',
      body: formData
    })
    .then ((response) => response.json())
    .then ((data) => {
      console.log('Login response: ', data);
      if (data.user) {
        onLoggedIn(data.user, data.token);
      } else {
        alert('Dave\'s not here! No such user.');
      }
    })
    .catch((e) => {
      alert('Something went wrong');
    });
};

这种方式对应application/x-www-form-urlencoded格式，是Passport本地策略默认支持的格式，只要后端配置了express.urlencoded({ extended: true })中间件就能正确解析。

方案2：发送JSON格式请求体（需后端配合配置）

如果后端期望接收JSON格式，需要明确设置请求头，并直接发送JSON字符串：

const handleSubmit = (event) => {
    event.preventDefault();

    const data = {
      Username: username,
      Password: password
    };

    fetch('https://cthulhuflix.onrender.com/login', {
      method: 'POST',
      // 必须设置Content-Type告知后端是JSON格式
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(data)
    })
    .then ((response) => response.json())
    .then ((data) => {
      console.log('Login response: ', data);
      if (data.user) {
        onLoggedIn(data.user, data.token);
      } else {
        alert('Dave\'s not here! No such user.');
      }
    })
    .catch((e) => {
      alert('Something went wrong');
    });
};

这种情况需要后端先配置express.json()中间件，确保能解析JSON请求体，Passport策略才能拿到正确的用户名和密码。

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