如何解决REST API调用Expected type object but found type string报错（React/JS）

问题复现 #

调用Auth0管理API的更新用户接口时返回400错误，错误响应如下：

{"statusCode":400,"error":"Bad Request","message":"Payload validation error: 'Expected type object but found type string'.","errorCode":"invalid_body"}

原代码存在3个核心错误：

• fetch请求直接传入JS对象作为body，未做JSON序列化
• 带短横线的请求头键名未加引号，触发JS语法错误，导致Content-Type未正确设置，请求默认以text/plain格式发送
• 错误使用JSON.parse()处理请求体，混淆了序列化/反序列化方向；且直接await fetch返回值拿到的是Response实例，未解析为实际JSON数据

根因说明 #

fetch API不会自动将JS对象转换为JSON格式传输：

1. 直接传入JS对象作为body时，会被默认转换为[object Object]字符串
2. 未手动指定Content-Type时，请求默认使用text/plain;charset=UTF-8编码
3. Auth0服务端收到纯文本格式的字符串请求体，和接口要求的JSON对象类型不匹配，直接返回类型校验错误

修复步骤 #

1. 给所有带特殊字符（比如短横线）的请求头键名加双引号包裹，避免JS语法报错，正确设置Content-Type: application/json
2. 请求体必须用JSON.stringify()将JS对象序列化为JSON字符串，不要用反了序列化方向的JSON.parse()
3. 拿到fetch响应后，调用.json()方法解析Response实例，获取实际接口返回数据

修复后完整代码 #

const sUserMetadata = async () => {
    const domain = "xxxxxxxxxxxxxxx"
    try {
        const accessToken = await getAccessTokenSilently({
            audience: `${domain}/api/v2/`,
            scope: "update:current_user_metadata",
        });

        const userDetailsByIdUrl = `${domain}/api/v2/users/${user.sub}`;
        const metadataResponse = await fetch(userDetailsByIdUrl, {
            method: 'PATCH',
            headers: {
                Authorization: `Bearer ${accessToken}`,
                "Content-Type": "application/json"
            },
            body: JSON.stringify({ "email_verified": true })
        })

        const user_metadata = await metadataResponse.json();
        console.log(user_metadata)
    } catch (e) {
        console.log(e.message);
    }
};

sUserMetadata().then(r => null);

校验标准 #

修复后请求满足以下特征即为正常：

• Chrome调试面板中请求的Content-Type为application/json
• 请求Payload显示为标准JSON格式：{"email_verified":true}
• 接口返回200状态码，响应体为更新后的用户完整信息

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