Angular 5中如何为POST请求添加请求头参数（如Authorization）？

没问题，我来帮你搞定Angular里给POST请求加请求头的事儿！

首先，你需要借助Angular的HttpHeaders类来构建请求头，再把它作为配置参数传给post方法的第三个参数就行。

1. 基础示例：添加Authorization头 #

先确保你已经导入了必要的模块（如果还没导的话）：

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

接下来可以用两种方式构建请求头，选你顺手的就行：

方式一：链式调用构建Headers #

// 构建请求头对象，按需添加需要的字段
const requestHeaders = new HttpHeaders()
  .set('Authorization', 'Bearer your-actual-token-here') // 替换成你的真实token
  .set('Content-Type', 'application/json'); // POST请求通常需要指定这个类型

// 发起请求时，把headers放到配置项里
this.http.post(
  'http://localhost:8989/anchor_web_api/resources',
  this.resourceMap,
  { headers: requestHeaders }
).subscribe(res => console.log(res));

方式二：对象字面量简化写法 #

const requestHeaders = {
  'Authorization': 'Bearer your-actual-token-here',
  'Content-Type': 'application/json'
};

this.http.post(
  'http://localhost:8989/anchor_web_api/resources',
  this.resourceMap,
  { headers: requestHeaders }
).subscribe(res => console.log(res));

2. 跨域相关请求头的注意事项 #

关于跨域（CORS）的请求头，有几个关键点要记牢：

• 像Origin这类标准跨域头是浏览器自动添加的，不用你手动设置。
• 如果需要携带凭证（比如Cookie）跨域请求，要在配置里加上withCredentials: true：

const requestOptions = {
  headers: new HttpHeaders().set('Authorization', 'Bearer your-actual-token-here'),
  withCredentials: true // 允许请求携带Cookie等凭证
};

this.http.post(
  'http://localhost:8989/anchor_web_api/resources',
  this.resourceMap,
  requestOptions
).subscribe(res => console.log(res));

• 跨域请求能否成功，服务器端的配置才是关键：服务器需要返回Access-Control-Allow-Origin、Access-Control-Allow-Headers等响应头，明确允许你的前端域名和自定义请求头。如果服务器没配置好，就算前端加了头也会触发CORS错误。

3. 可选：全局统一设置请求头 #

如果你的大部分请求都需要带相同的头（比如Authorization），可以用HttpInterceptor做全局配置，不用每个请求都手动加：

// 先创建一个拦截器文件，比如auth.interceptor.ts
import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler } from '@angular/common/http';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler) {
    // 克隆原请求并添加Authorization头（避免修改原请求对象）
    const authRequest = req.clone({
      headers: req.headers.set('Authorization', 'Bearer your-actual-token-here')
    });
    return next.handle(authRequest);
  }
}

然后在AppModule里注册这个拦截器：

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { AuthInterceptor } from './auth.interceptor';

@NgModule({
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthInterceptor,
      multi: true
    }
  ]
})
export class AppModule { }

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