华为云 APIG 跨域请求报 CORS 错误？预检与响应头配置实战

用 APIG（API 网关）发布了一个后端接口，Swagger 里调试一切正常，前端页面一调就被浏览器拦下来报 No 'Access-Control-Allow-Origin' header。这是典型的跨域问题，APIG 上需要在分组或 API 级别正确配置 CORS，且不能和后端自己的 CORS 头打架。记录一下完整的排查与配置过程。

一、先分清是谁拦的

浏览器开发者工具 Network 里看那个失败的请求：如果是一个 OPTIONS 请求（预检）失败，问题出在跨域配置；如果 OPTIONS 成功、真正的 GET/POST 失败，则多半是业务头或凭据配置问题。注意 CORS 是浏览器行为，Postman/curl 调用永远不会报这个错，所以「Swagger 正常、浏览器报错」是正常现象，不是 API 故障。

二、APIG 侧开启 CORS

APIG 支持在 API 定义里开启「支持跨域（CORS）」，开启后网关会自动应答 OPTIONS 预检请求。需要检查三处：

• Allowed Origin：填前端的完整来源（协议+域名+端口），例如 https://app.example.com。开发期可以临时用 *，但和「允许凭据」不能同时用；
• Allowed Headers：至少要包含前端实际发送的自定义头，比如 Authorization,X-Request-Id。漏了自定义头，预检一样失败；
• Allowed Methods：覆盖前端实际用到的方法，不要只配 GET。

三、后端不要重复发 CORS 头

最常见的报错是 multiple CORS header 'Access-Control-Allow-Origin'：APIG 已经开了一次 CORS，后端服务（比如 Spring Boot 的 @CrossOrigin 或 Nginx 的 add_header）又加了一遍，浏览器收到两个同名头直接拒绝。CORS 只在一处配置：走 APIG 就把后端的跨域头全部去掉；后端自答的 OPTIONS 请求也不需要了，网关会接管。

四、带 Cookie 的请求

前端如果用 fetch(url, {credentials: 'include'}) 带 Cookie 调用，服务端的 Allowed Origin 不能是 *，必须写明确来源，且响应要带 Access-Control-Allow-Credentials: true。APIG 开启 CORS 时把「允许携带凭据」勾上即可。另外 Cookie 的 SameSite=None; Secure 属性也要配，否则浏览器照样不发送。

五、快速自检命令

curl -i -X OPTIONS https://gateway.example.com/api/v1/xx \
  -H "Origin: https://app.example.com" \
  -H "Access-Control-Request-Method: POST" \
  -H "Access-Control-Request-Headers: authorization,content-type"

返回里看三个头：Allow-Origin 是否等于你的来源、Allow-Headers 是否覆盖了请求头、Allow-Methods 是否包含目标方法。三个都对了，浏览器就不会再拦。