跨域预检请求失败问题分析

问题描述

浏览器发送 OPTIONS 预检请求后，Nginx 返回了 204 响应，且 Access-Control-Allow-Headers 设置为 *，但浏览器仍然报错：

根因分析

W3C Fetch 规范限制

根据 W3C Fetch Standard 规范：

When credentials mode is “include”（即 Access-Control-Allow-Credentials: true），the following headers must NOT use wildcard *:

• Access-Control-Allow-Origin
• Access-Control-Allow-Headers
• Access-Control-Allow-Methods

简而言之：Access-Control-Allow-Credentials: true 与通配符 * 互斥。

问题响应示例

浏览器检测到 credentials 模式下 Allow-Headers 为 *，认为这是一个无效的 CORS 响应，因此拦截了实际请求。

修复方案

将 Nginx 配置中的通配符替换为显式列举的值：

修改前

修改后

参考资料

• Fetch Standard - CORS Preflight
• MDN - CORS: Access-Control-Allow-Credentials
• Can I Use - CORS