如何在Angular项目中携带.pfx证书调用银行API的HTTP请求？

对接某银行API时，要求调用必须携带.pfx证书。在Postman中配置证书及密码后可正常建立连接，但在Angular项目中，找不到正确在请求中携带该证书的方法。当前请求代码如下：

const httpHeaders = {
        headers: new HttpHeaders({
            'Content-Type': 'application/x-www-form-urlencoded',
        })
    };

const map = {
    'x-api-clientid': config.clienteId,
    'grant_type': 'client_credentials'
}

try {
    return await this.httpClient.post(config.url_token, map, httpHeaders).toPromise().then((resp: any) => {
        console.log('resp')
        console.log(resp)
        return resp
    });
} catch (error) {
    console.log('erro in post')
    console.log(error);
    return false;
}

请问如何实现携带.pfx证书调用该API？

浏览器出于安全限制，不允许JS直接读取本地.pfx证书文件，无法像Postman那样直接配置证书嵌入请求。以下是两种可行的实现方式：

方案1：依赖浏览器客户端证书弹窗处理 #

如果银行API的证书要求是SSL层的客户端认证，服务器会在TLS握手阶段触发浏览器的证书选择弹窗，用户只需提前将.pfx证书安装到本地浏览器，或在弹窗中选择证书文件并输入密码，即可完成认证。这种情况下你的现有请求代码无需修改，直接发起请求即可。

若需要让用户手动上传证书使用，可借助文件选择器+Web Crypto API处理（仅适用于需要签名的特定场景，SSL层认证仍依赖浏览器自动弹窗）：

// 模板中添加文件选择框
<input type="file" accept=".pfx" (change)="handleCertificateUpload($event)">

// 组件中处理证书上传与请求
async handleCertificateUpload(event: Event) {
  const file = (event.target as HTMLInputElement).files?.[0];
  if (!file) return;

  const password = prompt('请输入证书密码');
  if (!password) return;

  try {
    const buffer = await file.arrayBuffer();
    // 导入PFX证书
    await window.crypto.subtle.importKey(
      'pkcs12',
      buffer,
      { name: 'RSASSA-PKCS1-v1_5' },
      false,
      ['sign']
    );
    // 发起请求，浏览器会自动使用导入的证书完成认证
    const resp = await this.httpClient.post(config.url_token, map, httpHeaders).toPromise();
    console.log(resp);
  } catch (err) {
    console.error('证书处理失败', err);
  }
}

方案2：后端代理转发请求（生产环境推荐） #

前端直接处理证书存在安全风险（证书和密码易泄露），更稳妥的方式是搭建后端服务，由后端加载.pfx证书并转发请求，前端仅调用后端接口。

以Node.js为例，后端代理代码示例：

const axios = require('axios');
const https = require('https');
const fs = require('fs');
const express = require('express');
const app = express();

// 加载PFX证书
const sslAgent = new https.Agent({
  pfx: fs.readFileSync('./path/to/your/cert.pfx'),
  passphrase: '你的证书密码'
});

// 代理接口
app.post('/api/bank/token', express.urlencoded({extended: true}), async (req, res) => {
  try {
    const bankResp = await axios.post(config.url_token, req.body, {
      headers: req.headers,
      httpsAgent: sslAgent
    });
    res.send(bankResp.data);
  } catch (err) {
    res.status(err.response?.status || 500).send(err.response?.data || '请求失败');
  }
});

app.listen(3000);

Angular中修改请求地址为后端代理接口：

try {
  return await this.httpClient.post('/api/bank/token', map, httpHeaders).toPromise().then((resp: any) => {
    console.log('resp', resp);
    return resp;
  });
} catch (error) {
  console.log('erro in post', error);
  return false;
}

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