Angular发送POST请求时如何携带API key解决未授权报错

安全阿岳

2026-9-27

Angular POST请求携带API Key的实现方案

API Key通常有两种携带方式，可根据后端接口要求选择：

方式1：放在请求头中（最常用，安全性更高）

首先在你当前组件的顶部导入Angular的HttpHeaders模块：

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

然后修改你的请求方法，在http.post的第三个参数中传入请求头配置：

SendToBackEnd(){         
    var x=new mymodel();
    x.settlementCurrency='EUR';
    x.customerReference='m455';
    x.paymentReference='65465465';

    // 配置请求头，X-API-Key为后端约定的头字段，值替换为你的实际API Key
    const httpOptions = {
      headers: new HttpHeaders({
        'X-API-Key': '你的实际API Key值'
      })
    };

    this.http.post("address", x, httpOptions).subscribe(s=>{
      // 后续业务逻辑
    });
}

注意：头字段名`X-API-Key`需要和后端要求的一致，部分后端可能用`Api-Key`、`Authorization`等其他字段名，以接口文档为准。

方式2：放在URL查询参数中

如果后端要求将API Key放在请求地址的参数中，可以直接拼接URL：

SendToBackEnd(){         
    var x=new mymodel();
    x.settlementCurrency='EUR';
    x.customerReference='m455';
    x.paymentReference='65465465';

    // 拼接方式，apiKey为后端约定的参数名
    const requestUrl = `address?apiKey=你的实际API Key值`;

    this.http.post(requestUrl, x).subscribe(s=>{
      // 后续业务逻辑
    });
}