Angular HttpClient POST请求Google FCM服务端接口失败如何修复？

核心触发原因是浏览器CORS（跨域资源共享）限制：

• Postman作为独立桌面客户端，不受浏览器同源安全策略约束，所以直接调用FCM HTTP v1接口可以正常返回结果
• Angular应用运行在浏览器环境下，而FCM官方的消息发送接口本身没有配置允许前端业务域名跨域调用的响应头，浏览器会直接拦截该请求，返回你看到的跨域错误。

额外提醒：FCM的消息发送接口从设计之初就是给服务端调用的，你当前把Firebase access token直接放在前端代码里的写法存在严重安全隐患——任何用户都可以通过前端代码拿到这个凭证，无限制盗用你的Firebase资源发推送。

方案1：生产环境标准实现（推荐） #

把FCM消息发送逻辑迁移到自有后端服务，从根源解决CORS和安全问题：

• 前端Angular端仅将推送所需的业务参数（推送标题、内容、目标用户token等）发送给自有业务后端
• 由后端服务统一存储Firebase服务账号凭证、生成合法access token，调用FCM v1接口完成消息发送
• 后端将发送结果返回给前端即可
  该方案完全符合Firebase官方的安全规范，不存在凭证泄露风险，也不会触发跨域问题。

方案2：本地开发临时调试方案（禁止用于生产） #

如果只是本地开发阶段临时调试接口，可以通过Angular内置的开发代理绕过CORS限制，注意该方案仅在本地ng serve运行时生效，打包上线后无效，且前端存储access token的安全风险依然存在：

1. 在Angular项目src目录下新建proxy.conf.json文件，写入以下代理配置：

{
  "/fcm-proxy/*": {
    "target": "https://fcm.googleapis.com",
    "secure": true,
    "changeOrigin": true,
    "pathRewrite": {
      "^/fcm-proxy": ""
    }
  }
}

2. 修改服务层代码中的请求地址为代理相对路径：

// 原线上地址替换为本地代理路径
const url = '/fcm-proxy/v1/projects/***-notifications/messages:send';

3. 打开项目根目录的angular.json文件，在开发服务配置中添加代理引用：

"architect": {
  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "proxyConfig": "src/proxy.conf.json"
      // 其余原有配置保持不变
    }
  }
}

4. 重启本地开发服务ng serve，即可在本地正常发起请求。

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