浏览器请求返回400 Bad Request，Postman相同请求体却正常

我用以下前端代码构造包含enrichmentExpression和variables的JSON请求体：

var finalJsonArray = [];
var idCounter = 1; 

for (let expr of allExpressions) {
    finalJsonArray.push({
        id: String(idCounter), 
        enrichmentExpression: expr,
        variables: allVariables
    });
    idCounter++;
}

var finalJsonString = JSON.stringify(finalJsonArray);

通过浏览器发送请求时，服务器返回400错误：

{
   "code":"400 BAD_REQUEST",
   "message":"BAD_REQUEST",
   "timestamp":"2023-09-20 06:28:48.958",
   "retryable":false,
   "severity":"ERROR",
   "details":{
      "Message":"Request body is invalid Šifra greške: 48687",
      "SessionId":null,
      "MessageName":"Bad Request"
   }
}

但把浏览器里的原始JSON请求体复制到Postman发送，却能得到正常的200响应：

{
    "code": 200,
    "status": "OK",
    "meta": {
        "responseType": "HashMap",
        "responseTypeFull": "java.util.HashMap"
    },
    "data": {
        "1": {
            "isValid": "true"
        },
        "2": {
            "isValid": "false",
            "error": "ParseException: Encountered \" }\" \" } \"\" at line 1, column 3.\nWas expecting one of:\n    \"{\" ...\n    <INTEGER_LITERAL> ...\n    <FLOATING_POINT_LITERAL> ...\n    <STRING_LITERAL> ...\n    \"true\" ...\n    \"false\" ...\n    \"null\" ...\n    \"(\" ...\n    \"[\" ...\n    \"!\" ...\n    \"not\" ...\n    \"empty\" ...\n    \"-\" ...\n    <IDENTIFIER> ...\n    <IDENTIFIER> ...\n    \"(\" ...\n    "
        },
        "3": {
            "isValid": "false",
            "error": "ParseException: Encountered \" }\" \" } \"\" at line 1, column 3.\nWas expecting one of:\n    \"{\" ...\n    <INTEGER_LITERAL> ...\n    <FLOATING_POINT_LITERAL> ...\n    <STRING_LITERAL> ...\n    \"true\" ...\n    \"false\" ...\n    \"null\" ...\n    \"(\" ...\n    \"[\" ...\n    \"!\" ...\n    \"not\" ...\n    \"empty\" ...\n    \"-\" ...\n    <IDENTIFIER> ...\n    <IDENTIFIER> ...\n    \"(\" ...\n    "
        }
    }
}

想知道为什么会有这种差异，该怎么解决？

• 请求头缺失：浏览器发送请求时未设置Content-Type: application/json，服务器无法识别请求体格式，导致解析失败；Postman默认会自动添加该头，所以能正常处理。
• 编码不一致：浏览器发送的JSON可能使用了非UTF-8编码，而服务器仅支持UTF-8解析；Postman默认用UTF-8发送，符合服务器要求。
• 请求体被隐式修改：浏览器在传输过程中可能对JSON字符串做了额外转义或编码，而复制到Postman的是原始未修改的JSON内容，两者不一致导致服务器报错。

1. 添加正确的请求头
   在发送请求的代码中明确设置Content-Type头：

   • 使用fetch：

     fetch('/your-api-url', {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json'
       },
       body: finalJsonString
     });
     

   • 使用XMLHttpRequest：

     const xhr = new XMLHttpRequest();
     xhr.open('POST', '/your-api-url');
     xhr.setRequestHeader('Content-Type', 'application/json');
     xhr.send(finalJsonString);
     

2. 验证请求体一致性
   在浏览器开发者工具的Network面板中，查看实际发送的请求体内容，和finalJsonString的输出对比，确认是否存在被修改的情况。如果有，排查代码中是否在生成JSON后做了额外处理。

3. 校验表达式格式
   从Postman的响应来看，部分enrichmentExpression存在语法错误（比如意外的}），虽然Postman能发送成功，但服务器会返回解析失败的结果。可以提前校验allExpressions中的每个表达式，确保语法符合要求。

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