Angular 6请求头设置问题：解决POST请求CORS及参数类型报错

我明白你刚接触Angular 6，在处理POST请求时遇到了CORS问题和请求头设置的类型报错——这其实是Angular版本迭代后API变化导致的，旧版本的RequestOptions相关写法在Angular 6+里已经被废弃了，咱们直接来看正确的做法：

核心问题原因 #

你遇到的类型错误Argument of type '{ header: any; }' is not assignable to parameter of type 'RequestOptionsArgs'，主要有两个原因：

1. Angular 6+已经不再使用旧的RequestOptionsArgs，而是改用HttpHeaders来构建请求头，API结构发生了变化
2. 你代码里写的是header（单数），但正确的字段名应该是headers（复数）

正确的请求头设置步骤 #

1. 导入必要的模块

首先确保你在组件或服务中导入HttpClient和HttpHeaders（注意是从@angular/common/http导入，不是旧的@angular/http）：

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

2. 注入HttpClient服务

在构造函数中注入HttpClient，用于发起请求：

constructor(private http: HttpClient) { }

3. 构建请求头和请求选项

创建HttpHeaders对象来设置Content-Type，然后封装到请求选项中：

// 配置请求头，这里以application/json为例
const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type': 'application/json'
    // 如果需要其他请求头，比如Authorization，直接在这里添加即可
    // 'Authorization': 'Bearer your-token'
  })
};

4. 发起POST请求

将请求选项作为第三个参数传入post方法：

// 替换成你的API地址和请求体数据
const apiUrl = 'https://your-api-endpoint.com';
const requestBody = { key: 'value' };

this.http.post(apiUrl, requestBody, httpOptions)
  .subscribe(
    response => {
      console.log('请求成功:', response);
    },
    error => {
      console.error('请求失败:', error);
    }
  );

特殊情况：表单数据（FormData） #

如果你是提交表单数据，不需要手动设置Content-Type，浏览器会自动生成正确的multipart/form-data头：

const formData = new FormData();
formData.append('username', 'test-user');
formData.append('avatar', file);

// 直接传入FormData即可，无需额外设置headers
this.http.post(apiUrl, formData)
  .subscribe(...);

关于CORS问题的补充 #

虽然设置Content-Type是必要的，但CORS问题的核心解决需要后端配合：后端需要在响应头中配置Access-Control-Allow-Origin、Access-Control-Allow-Headers等字段，允许你的前端域名跨域访问。前端设置请求头只是满足后端的要求，最终还是要后端开启跨域支持。

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