映射 FormData 结构时出错 Angular

Question

我正在尝试将 AJAX jQuery 调用转换为 Angular HTTP POST 请求。

这是 ajax jQuery

的片段

$.ajax({
   url: env.URL,
   data: request,
   method: 'POST',
   timeout: 6000,
   success: function (response) {
     // business logic
   }
});

这是请求 headers 和 body:

的结构

收到的回复是 HTML 形式。

将其转换为 Angular:

const header = new HttpHeaders();
header.append('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
header.append('Access-Control-Allow-Origin', '*');
header.append('Accept', 'text/html, application/xhtml+xml, */*');
const httpOptions = {
   responseType: 'text' as 'json', // if not converted, I get json parse error as return response is HTML e.g. error parsing `<` at line 28
   headers: header
};
const temp = new FormData();
Object.keys(request).forEach(key => temp.append(key, request[key]));

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

这是请求 headers 和 body:

的结构

在 header 中，我在 form-data

中也有其他字符串被推断为 boundary=----WebKitFormBoundaryGEf4TefkXkO6MbyV

------WebKitFormBoundaryGEf4TefkXkO6MbyV
Content-Disposition: form-data; name="address"

test test test

我尝试了多种排列和组合 header 值和响应类型，例如：

根本不发送 header 并让它根据标准默认推断
将content-type设为undefined、null、multipart/formdata
仅将 responseType 设置为 text（给出错误），省略 responseType（再次给出错误）即 Types of property 'responseType' are incompatible. Type 'string' is not assignable to type '"json"'. 因为返回的响应是 HTML.

你能帮我修复表单数据的结构吗？content-type header 请求已发送！

Answer 1

我无法为此找到具体的解决方案，因此解决此问题的快速修复方法是：

将 POST 请求调用更改为 GET 请求
将（表单数据）有效负载转换为 URL 中的查询参数：

const header = new HttpHeaders();
header.append('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');

let queryParams = new HttpParams();
Object.keys(request).forEach(key => {
   queryParams = queryParams.append(key, request[key]);
});

const httpOptions = {
  responseType: 'text' as 'json',
  headers: header,
  params: queryParams
};

return this.http.get(env.URL, httpOptions);

映射 FormData 结构时出错 Angular

Error in mapping FormData structure Angular

http

multipartform-data

angular