解决Angular调用第三方API时的CORS错误

你遇到的CORS错误是浏览器同源安全策略导致的——浏览器会阻止前端页面直接请求不同源的API，而Postman这类工具不受该策略限制，所以能正常请求。由于你无法修改第三方服务器的配置，无法仅通过修改Angular前端代码解决这个问题，但可以通过以下几种方式绕过：

1. 使用Angular开发代理（推荐，仅开发环境） #

这是Angular官方推荐的开发环境解决方案，通过本地代理转发请求，避免浏览器的CORS检查：

• 在项目根目录创建proxy.conf.json文件，内容如下：

{
  "/third-party-api": {
    "target": "https://api.someexternalapi.com",
    "secure": false,
    "changeOrigin": true,
    "pathRewrite": {
      "^/third-party-api": ""
    }
  }
}

• 修改angular.json中的serve配置，指定代理文件：

"projects": {
  "your-project-name": {
    "architect": {
      "serve": {
        "options": {
          "proxyConfig": "proxy.conf.json"
        }
      }
    }
  }
}

• 调整你的请求代码，将目标URL替换为代理路径：

return this.http.get('/third-party-api').pipe(
  map((response) => response),
  catchError(error => of(this.handleError(error)))
);

重启Angular开发服务器后，请求会通过本地代理转发到第三方API，不会触发CORS错误。

2. 搭建后端中转服务（生产环境适用） #

如果是生产环境，你需要搭建一个自己的后端服务（比如Node.js、Java等），由后端服务去请求第三方API，然后前端请求自己的后端接口。这样前端和后端同源，不会有CORS问题，后端请求第三方API不受浏览器同源策略限制。

3. 浏览器CORS插件（仅开发调试用） #

开发阶段可以安装Chrome的CORS相关插件（比如CORS Unblock），临时禁用浏览器的CORS检查。但这种方式仅适合本地调试，不能用于生产环境，且对其他用户无效。

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