React中fetch POST请求用JSON.stringify后返回结果出现双重引号问题

发起POST HTTP请求时，请求体获取useState变量的值，接口返回结果的字段值却带有双重引号（例如"name" : "\"Julieth\""）。已知useState变量的值是正确的，若去掉请求体中的JSON.stringify会导致请求报错，需要解决返回结果的双重引号问题。

我的请求代码：

const getUsers = async () => {
  try {
    const myHeaders = new Headers();
    myHeaders.append("Content-Type", "application/json");

    const data = {
      lastName: lastName,
      email: email,
      name: name,
      password: password,
    };

    const requestOptions = {
      method: "POST",
      headers: myHeaders,
      body: JSON.stringify(data),
      redirect: "follow",
    };

    const response = await fetch(url2, requestOptions);

    if (response.status != 200) {
      throw new Error(
        `something went wrong, status code: ${response.status}`
      );
    }
    const users = await response.json();
    return users;
  } catch (err) {
    console.log(err);
  }
};

接口返回的响应示例：

"name" : "\"Julieth\"",
"lastname" : "\"Bautista\"",
"email" : "\"tierra2@hotmail.com\"",
"password" : "\"Test123!\""

返回结果在界面中的双重引号显示：

这种双重引号问题本质是后端接口对请求体做了重复JSON序列化。你的前端代码完全符合标准：设置了Content-Type: application/json请求头，并用JSON.stringify将对象转为JSON字符串，这是发起JSON格式POST请求的正确写法。

解决思路分两种：

1. 优先修改后端逻辑：
   检查后端接收请求的处理流程——如果后端框架已经自动解析了JSON请求体（比如Node.js Express的express.json()中间件、Java Spring的@RequestBody注解），但代码里又对解析后的对象再次调用了JSON序列化方法，就会导致字符串被双重转义，出现"\"Julieth\""这类格式。只需要去掉后端多余的序列化步骤即可解决。

2. 前端临时兼容处理：
   如果暂时无法修改后端，可以在接收响应后对字段值做反转义处理：

const users = await response.json();
// 遍历所有字段，去除字符串两端的转义引号
const cleanedData = Object.fromEntries(
  Object.entries(users).map(([key, value]) => {
    if (typeof value === 'string' && value.startsWith('"') && value.endsWith('"')) {
      return [key, value.slice(1, -1)];
    }
    return [key, value];
  })
);
return cleanedData;

注意：前端兼容只是临时方案，核心问题在后端，建议优先修复后端逻辑。

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