无法将Express后端的重复用户名错误传递至React前端

问题根源分析 #

1. Fetch默认不抛出HTTP错误：只有网络请求失败时才会进入catch块，像401这类HTTP错误状态码不会触发catch，需要手动判断。
2. Express后端变量冲突：路由处理函数里的const res = JSON.stringify(result)覆盖了内置的res响应对象，导致成功响应也会出错。
3. createUser未正确传递错误：当前代码没有处理响应结果，也没在HTTP错误时主动抛出异常，导致上层handleSubmit无法捕获错误。

修复步骤 #

1. 修复Express后端代码（index.js） #

修改变量名避免覆盖响应对象，同时调整错误状态码语义：

app.post('/register', async (req, res) => {
  const data = req.body;
  const username = data.username;
  const password = data.password;

  // 注意：直接拼接SQL存在注入风险，建议改用参数化查询！
  const query = `INSERT INTO accounts (username, password, email) VALUES ('${username}','${password}');`;
  
  try {
    const result = await connection.query(query);
    const resultStr = JSON.stringify(result); // 重命名变量，避免覆盖res
    res.status(200).send({ message: 'success' });
  } catch (error) {
    res.status(409).send({ message: error.code }); // 用409 Conflict更贴合重复资源的语义
  }
})

重要提醒：字符串拼接SQL存在严重安全风险，建议替换为参数化查询，比如：
connection.query('INSERT INTO accounts (username, password) VALUES (?, ?)', [username, password])

2. 修复createUser.js的错误处理逻辑 #

手动检查响应状态，解析响应体并主动抛出错误：

export const createUser = async (username, password) => {
  const data = { username, password };
  try {
    const response = await fetch('http://localhost:3001/register', {
      method: 'POST',
      body: JSON.stringify(data),
      headers: {
        'Content-Type': 'application/json',
      }
    });

    const responseData = await response.json();
    if (!response.ok) {
      // 状态码非2xx时抛出错误，让上层try/catch捕获
      throw new Error(responseData.message);
    }
    return responseData;
  } catch (error) {
    throw error; // 传递错误到上层组件
  }
}

3. 调整Register.jsx的错误处理 #

现在可以正常捕获并展示错误：

const handleSubmit = async () => {
  try {
    const res = await createUser(username, password);
    console.log(res);
    // 注册成功后的逻辑，比如跳转登录页
  } catch (err) {
    console.log(err.message);
    setError(err.message); // 直接存储错误信息字符串
  }
}

为什么之前无法捕获错误？ #

• Fetch仅在网络故障时触发catch，HTTP错误（如409）不会自动抛出，必须手动判断response.ok并主动抛出异常。
• Express里覆盖了res对象，导致成功响应可能无法正常返回；同时前端未处理响应状态，无法感知后端返回的错误信息。

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