启用key-auth的Express Gateway调用前端时出现CORS问题

根据你的场景描述，问题核心出在Express Gateway中key-auth策略与CORS预检请求（OPTIONS）的交互逻辑上。虽然你配置了跳过OPTIONS请求的key-auth验证，但策略执行顺序、条件配置细节的问题，导致OPTIONS请求没有正确通过CORS校验。下面是一步步的修复方案：

1. 调整Express Gateway的策略顺序与key-auth条件 #

Express Gateway的策略是按顺序执行的，cors策略必须放在key-auth之前，确保OPTIONS请求先完成CORS校验，再判断是否需要鉴权。同时优化key-auth的条件配置，避免逻辑疏漏：

apiEndpoints:
  - example
policies:
  # 优先处理CORS，确保预检请求先通过校验
  - cors:
    - action:
        origin: ["*"] # 生产环境建议替换为具体前端域名，提升安全性
        methods: "HEAD,GET,PUT,PATCH,POST,DELETE,OPTIONS"
        preflightContinue: false # 改为false，让Gateway直接返回OPTIONS响应，无需传递到后端
        optionsSuccessStatus: 204
        maxAge: 600
        allowedHeaders: ["Origin", "X-Requested-With", "Content-Type", "Accept", "Authorization"]
        exposedHeaders: ["Authorization"] # 可选，暴露响应头供前端读取
  - key-auth:
    - condition:
        name: not
        condition:
          name: method
          methods: ["OPTIONS"] # 明确数组格式，避免解析歧义
  - proxy:
    - action:
        serviceEndpoint: exampleService
        proxyTimeout: 0

关键修改点：

• 把cors策略移到最前面，保证CORS校验优先执行
• 设置preflightContinue: false，让Gateway直接处理OPTIONS请求的响应，不用转发到后端服务
• 拆分allowedHeaders为数组元素，避免字符串格式导致的解析问题

2. 移除Angular请求中的无效请求头 #

前端请求里的Access-Control-Allow-Origin是响应头，不是请求头，前端发送这个头不仅无效，还可能干扰预检请求的处理，直接删除：

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type': 'application/json; charset=UTF-8', // 建议用小写的application/json，避免格式校验问题
    'Authorization': "Bearer " + apiKey
  }),
};

3. 简化资源服务的CORS配置 #

既然Express Gateway已经统一处理了CORS，后端资源服务可以简化甚至关闭CORS配置，避免多层配置冲突：

// routes.js
export default function routes(app) {
  // 若Gateway已处理CORS，这里可直接设置为允许Gateway的IP，或用*简化
  app.use(cors({ origin: '*' })); 
}

4. 调整Nginx的CORS配置，避免与Gateway冲突 #

Nginx仅负责托管Angular静态文件，API请求的CORS完全由Express Gateway处理，修改Nginx配置避免干涉API请求：

server(){
...
location / {
  # 仅处理静态资源的CORS
  if ($request_method = OPTIONS ) {
    add_header "Access-Control-Allow-Origin" *;
    add_header "Access-Control-Allow-Methods" "GET, POST, OPTIONS, HEAD";
    add_header "Access-Control-Allow-Headers" "Authorization, Origin, X-Requested-With, Content-Type, Accept";
    return 200;
  }
  # 静态资源的GET/POST请求添加CORS头
  add_header "Access-Control-Allow-Origin" *;
  try_files $uri $uri/ =404;
}

# API请求转发到Gateway，由Gateway处理CORS，这里不要加CORS头
location /api {
  proxy_pass http://gateway-ip:port;
  proxy_set_header Host $host;
  proxy_set_header X-Real-IP $remote_addr;
}
}

验证步骤 #

1. 重启Express Gateway、Nginx和资源服务
2. 打开浏览器控制台，查看OPTIONS请求的响应头，确认包含Access-Control-Allow-Origin: *和正确的Access-Control-Allow-Headers
3. 发送正常API请求，确认无CORS错误

这样调整后，就能解决启用key-auth后的CORS问题了。核心是让Gateway优先处理CORS预检请求，确保OPTIONS请求无需key-auth验证，同时避免多层CORS配置冲突。

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