Angular转换jQuery AJAX请求时FormData结构映射错误如何解决

问题根因 #

你遇到的问题本质是三处用法错误：

• 原jQuery请求发送的是application/x-www-form-urlencoded格式的请求体，你误用了FormData对象，导致浏览器自动将请求类型转为multipart/form-data并追加边界分隔符
• Angular的HttpHeaders是不可变对象，调用append()方法会返回新的实例，原有实例不会被修改，你的原写法等于请求头完全没生效
• responseType的报错是类型匹配问题，不需要强行将text断言为json，用正确的重载写法即可

修正后代码 #

import { HttpHeaders, HttpClient, HttpParams } from '@angular/common/http';

// ... 类内部业务方法
const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
    'Accept': 'text/html, application/xhtml+xml, */*'
  }),
  responseType: 'text' as const
};

// 构造x-www-form-urlencoded格式的请求体，不要使用FormData
const body = new HttpParams({ fromObject: request });

return this.http.post(env.URL, body.toString(), httpOptions);

改动说明 #

• 移除了无效的Access-Control-Allow-Origin请求头：该字段是服务端返回的响应头，客户端请求添加该字段没有任何作用
• 改用HttpParams构造符合application/x-www-form-urlencoded要求的请求体，不会生成多部分边界分隔符，完全匹配原jQuery请求的结构
• responseType: 'text' as const 解决类型报错问题，Angular会直接将返回的HTML内容作为字符串返回，不会触发JSON解析错误
• 改用构造函数直接传键值对的方式设置HttpHeaders，避免不可变对象的append调用遗漏赋值问题
• 如果request对象存在嵌套结构，可以自行实现序列化方法，将对象扁平化为key=value&key2=value2格式的字符串即可替换HttpParams部分

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