同配置下子域名站点OPTIONS带CORS头但axios POST跨域报错

问题描述 #

• 子域名1部署的应用运行正常：前端为Vue.js，部署地址为app.subdomain.domain.com；后端为Laravel，部署地址为subdomain.domain.com
• 子域名2部署的应用出现CORS跨域错误：前端为Vue.js，部署地址为app.subdomain2.domain.com；后端为Laravel，部署地址为subdomain2.domain.com
• 两处的应用代码、服务器配置、Vue.js及Laravel的配置均完全一致
• 具体异常：OPTIONS预检请求已经返回了正确的CORS响应头，但后续的POST请求却没有通过校验，出现跨域失败
  

常见诱因 #

• 请求头规则不匹配：OPTIONS响应的Access-Control-Allow-Headers未包含POST请求实际携带的自定义头字段。部分浏览器插件、页面埋点脚本可能会为请求额外注入自定义头，两个子域名的客户端环境差异会触发该问题。
• Origin校验规则异常：如果POST请求携带了Cookie、HTTP认证等凭证信息，OPTIONS响应的Access-Control-Allow-Origin不能使用通配符*，必须返回与请求Origin完全一致的域名。需检查后端CORS的Origin匹配规则是否存在硬编码错误、正则匹配遗漏子域名2的问题。
• Content-Type未放行：如果POST请求的Content-Type为application/json等非简单请求类型，OPTIONS响应的Access-Control-Allow-Headers必须明确包含Content-Type，否则会触发校验失败。
• CORS头重复冲突：如果Nginx、CDN等上层服务和Laravel后端同时返回了CORS响应头，会导致头重复，浏览器会判定为无效配置。需检查子域名2的上层服务是否额外配置了CORS规则。
• 缓存异常：子域名2的CDN或服务器可能缓存了旧的OPTIONS响应头，与实际POST请求返回的CORS头不一致，导致校验失败，可清理缓存后重试。
• 协议/证书问题：如果子域名2的前端为HTTPS、后端为HTTP，或者后端HTTPS证书不被信任，浏览器的混合内容限制也会触发跨域拦截。

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