Angular如何在POST请求体中发送字符串及排查400响应错误

• JSON序列化不合法：你手动拼接JSON字符串\"${testHtml}\"的方式存在严重转义风险，HTML内容本身会包含大量双引号、换行符、特殊HTML实体，手动加的双引号会和HTML内部的双引号冲突，最终生成非法JSON格式，ASP.NET后端反序列化请求体失败直接返回400。
• 单个字符串类型的[FromBody]绑定限制：ASP.NET对[FromBody]直接接收string类型的参数有严格规则，要求请求体必须是完全符合JSON规范的纯字符串值，任何格式偏差都会触发绑定失败。

方案1（最小改动）：使用标准JSON序列化替换手动拼接 #

直接调用JSON.stringify处理字符串，工具会自动完成所有特殊字符转义，生成合法JSON：

exportTestAsPdf(testHtml: string): Observable<any> {
    // 替换手动拼接逻辑，由JSON.stringify完成序列化
    return this.http.post<any>(this.baseTestApiUrl + "Print", JSON.stringify(testHtml), this.requestHeaders);
}

方案2（推荐，兼容性更高）：用对象包裹参数 #

直接传单个字符串的绑定成功率低，改用对象包裹参数，前后端对应修改后基本不会出现绑定问题：

前端修改 #

exportTestAsPdf(testHtml: string): Observable<any> {
    // 传对象而非纯字符串
    return this.http.post<any>(this.baseTestApiUrl + "Print", { testHtml }, this.requestHeaders);
}

后端修改 #

新增对应接收的DTO类，调整接口参数：

// 新增请求DTO类
public class PrintRequest
{
    public string TestHtml { get; set; }
}

[HttpPost]
public IActionResult Print([FromBody] PrintRequest request)
{
    string testHtml = request.TestHtml;
    // 原有业务逻辑不变
}

如果修改后仍然返回400，可以打开浏览器控制台的「网络」面板，复制对应请求的Payload内容，用JSON校验工具检查格式是否合法，同时可以在后端接口处加断点查看模型绑定的错误详情，快速定位问题。

内容的提问来源于stack exchange，提问作者M. Akar