Angular 4动态创建表单提交时如何添加自定义请求头？

刚好碰到过类似的场景，先给你明确一个核心问题：你当前用原生DOM创建表单提交的方式，是没办法直接添加自定义请求头的——因为浏览器的原生表单提交是默认行为，它不支持开发者手动设置自定义请求头，这是浏览器的安全限制之一。

不过根据你的使用场景，有两种可行的解决方案：

场景1：需要提交数据后跳转到目标页面（传统表单提交的跳转需求） #

这种情况下，我们可以换个思路：先通过Angular的HttpClient发送带自定义头的请求，再手动处理页面跳转或内容渲染，模拟原生表单提交的效果。

代码示例如下：

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

// 在组件/service中注入HttpClient
constructor(private http: HttpClient) {}

postWithHeadersAndRedirect(path: string, params: any, method: string = 'post') {
  // 定义自定义请求头
  const customHeaders = new HttpHeaders({
    'X-Custom-Header': 'your-custom-header-value',
    'Content-Type': 'application/x-www-form-urlencoded' // 匹配原生表单提交的Content-Type
  });

  // 将参数转换为表单格式
  const formParams = new URLSearchParams();
  Object.keys(params).forEach(key => {
    formParams.append(key, params[key]);
  });

  this.http.request(method, path, {
    body: formParams.toString(),
    headers: customHeaders,
    observe: 'response' // 获取完整的响应对象
  }).subscribe(response => {
    // 模拟表单提交后的页面跳转/渲染：如果响应是HTML，直接替换当前页面内容
    document.open();
    document.write(response.body as string);
    document.close();
    // 如果需要跳转到指定URL，也可以用：window.location.href = response.url;
  });
}

场景2：仅需发送API请求，不需要页面跳转 #

如果只是要提交数据到后端接口，不需要跳转页面，那直接用Angular的HttpClient发送请求就好，完全不需要创建原生表单，代码更简洁：

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

constructor(private http: HttpClient) {}

postToApiWithHeaders(path: string, params: any) {
  const customHeaders = new HttpHeaders({
    'X-Custom-Header': 'your-custom-header-value'
    // 可以添加更多自定义头
  });

  return this.http.post(path, params, { headers: customHeaders });
}

补充说明 #

为什么原生表单提交不能加自定义头？
浏览器的原生表单提交是一种传统的同步请求方式，为了安全和规范，浏览器只允许它发送标准的表单相关头信息，不支持开发者注入自定义头，这是为了避免跨域场景下的潜在安全风险。

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