Angular HttpClient调用Magic Eden API触发CORS错误如何解决

你之前的操作完全搞错了CORS的运行逻辑：Access-Control-Allow-Origin是服务端返回的响应头，不是前端发起请求时可以自行添加的请求头，你在前端请求里手动加这个头没有任何作用，反而可能触发额外的预检请求导致失败。
Postman可以正常请求是因为Postman是桌面客户端，不受浏览器同源安全策略限制；CORS拦截是浏览器层面的安全行为，和你用Angular HttpClient还是Axios发请求没有任何关系。
Magic Eden官方API本身没有配置允许任意浏览器前端跨域调用的CORS规则，所以你直接从前端向该接口发请求，一定会被浏览器拦截。

方案1：本地开发环境使用Angular内置代理临时调试 #

本地开发阶段可以用Angular自带的代理配置转发请求，绕过浏览器CORS限制，步骤如下：

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

{
  "/me-api": {
    "target": "https://api-mainnet.magiceden.dev",
    "secure": true,
    "changeOrigin": true,
    "pathRewrite": {
      "^/me-api": ""
    }
  }
}

• 打开项目根目录的angular.json，找到serve配置项，添加proxyConfig参数指向刚才创建的配置文件：

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "替换为你自己的项目名:build",
    "proxyConfig": "src/proxy.conf.json"
  }
}

• 修改前端请求代码，把原来直接写Magic Eden的绝对地址，改成走代理的相对路径：

getListings(symbol: string) {
  return this.http.get('/me-api/v2/collections/aos/listings?offset=0&limit=18');
}

重启本地开发服务后，开发环境的请求就不会触发CORS错误。注意：该方案仅在本地开发时生效，项目打包部署到生产环境后无法使用。

方案2：生产环境搭建自有后端代理层 #

生产环境必须搭建自己的后端服务做请求转发：前端所有调用Magic Eden API的请求，都先发送到你自己的后端服务，由后端服务发起请求到Magic Eden接口拿到数据，再返回给前端。
服务端之间的通信不受浏览器CORS策略限制，你可以用任意熟悉的后端技术栈（Node.js/Java/Python/Go等）实现这个转发逻辑，还可以在这一层统一做请求限流、数据缓存、接口鉴权，避免把相关密钥直接暴露在前端代码里。

方案3：临时测试用公共CORS代理 #

如果只是临时验证接口逻辑，可以使用公开的CORS代理服务转发请求，这类公共服务稳定性没有保障，还存在数据泄露风险，仅适合本地临时调试，绝对不能用于正式生产环境。

• 不要在前端请求头里添加Access-Control-Allow-Origin，该字段是服务端控制返回的，前端手动添加没有任何效果
• 不要尝试修改浏览器设置关闭CORS校验，这种配置只对你自己的浏览器生效，普通用户访问你的站点时依然会被拦截
• 不要反复更换前端请求库，CORS是浏览器层面的安全限制，和你用什么库发请求没有关系

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