React前端向C#后端提交登录对象时反序列化失败求助

问题根源 #

前端代码里犯了格式错误：你把payload序列化成JSON字符串后，又额外包装成了包含json字段的对象发送给后端。这导致后端接收到的请求体格式是：

{"json": "{\"Email\":\"xxx@xxx.com\",\"Password\":\"xxx\"}"}

但后端的[FromBody] LoginDTO期望直接接收LoginDTO结构的JSON：

{"Email":"xxx@xxx.com","Password":"xxx"}

格式完全不匹配，自然会在解析第一个{时失败。

前端代码修改方案（二选一即可） #

方案1：直接传递对象（推荐）

axios会自动帮你序列化对象并设置正确的Content-Type: application/json，不需要手动调用JSON.stringify：

const handleSubmit = async (e) => {
  e.preventDefault();
  
  try {
    const { data } = await axios.post(
      "https://localhost:5001/api/User/Login",
      payload // 直接传对象，不用包成{json}，也不用JSON.stringify
    );
    console.log(data);
    ctxDispatch({ type: "USER_LOGIN", payload: data });
    localStorage.setItem("userInfo", JSON.stringify(data));
    toast.success("Login Successful");
    navigate("/");
  } catch (err) {
    toast.error(getError(err));
  }
};

方案2：手动传递JSON字符串（仅特殊需求下使用）

如果一定要手动序列化，需要直接发送字符串本身，不要包装成对象，同时显式设置请求头：

const handleSubmit = async (e) => {
  e.preventDefault();
  const json = JSON.stringify(payload);
    
  try {
    const { data } = await axios.post(
      "https://localhost:5001/api/User/Login",
      json, // 直接传序列化后的字符串
      {
        headers: {
          'Content-Type': 'application/json' // 显式设置内容类型
        }
      }
    );
    console.log(data);
    ctxDispatch({ type: "USER_LOGIN", payload: data });
    localStorage.setItem("userInfo", JSON.stringify(data));
    toast.success("Login Successful");
    navigate("/");
  } catch (err) {
    toast.error(getError(err));
  }
};

后端代码无需修改 #

你的后端Login接口和LoginDTO类都是正确的，只要前端传递正确格式的JSON，就能正常解析。

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