CORS与x-apikey是否互斥？本地调用外部API遇请求头问题求助

CORS与x-apikey不存在互斥关系，你的问题出在no-cors模式的浏览器限制和后端CORS配置不匹配上，具体拆解如下：

为什么no-cors模式下x-apikey头无法发送？ #

当设置mode: 'no-cors'时，浏览器会将请求限制为简单请求范畴，仅允许发送浏览器认可的「简单请求头」，包括：

• Accept、Accept-Language、Content-Language
• Content-Type仅允许text/plain、multipart/form-data、application/x-www-form-urlencoded三种类型

自定义的x-apikey属于「非简单请求头」，在no-cors模式下会被浏览器自动忽略，因此无法发送到服务器。

启用CORS时触发错误的原因 #

启用CORS后，浏览器会先发送OPTIONS预检请求，验证服务器是否允许你的请求携带x-apikey这类自定义头。如果后端服务器的CORS配置中，没有将x-apikey加入Access-Control-Allow-Headers列表，也没有允许你的本地开发域名（如http://localhost:4200）跨域访问，就会触发CORS错误。这不是CORS和x-apikey互斥，而是后端配置未匹配请求需求。

可行的解决方法 #

1. 调整后端CORS配置 #

让后端在响应头中添加：

• Access-Control-Allow-Origin: http://localhost:4200（允许你的本地开发域名）
• Access-Control-Allow-Headers: x-apikey, Content-Type（明确允许自定义头和Content-Type）
• 若需要携带凭证，还要加上Access-Control-Allow-Credentials: true

2. 使用Angular代理（本地开发推荐） #

在项目根目录创建proxy.conf.json文件，配置如下：

{
  "/api": {
    "target": "http://yyyy",
    "secure": false,
    "changeOrigin": true,
    "headers": {
      "x-apikey": "xxx"
    }
  }
}

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

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "your-project-name:build",
    "proxyConfig": "proxy.conf.json"
  }
}

最后将服务中的请求URL改为/api，代理会自动将请求转发到目标服务器，同时带上x-apikey头，避免浏览器端的CORS问题。

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