跨域预检请求失败问题分析
内容提要
文章分析了跨域预检请求失败问题：浏览器发送OPTIONS预检后，Nginx返回204且Access-Control-Allow-Headers设为*，但浏览器仍报错。根因是W3C规范规定，当Access-Control-Allow-Credentials为true时，不能使用通配符*。解决方案是将Nginx配置中的通配符替换为显式列举的允许头和方法列表。
延伸解读
通配符与凭据模式的互斥规则
文章指出，当Access-Control-Allow-Credentials为true时，W3C Fetch规范禁止在Access-Control-Allow-Origin、Allow-Headers和Allow-Methods中使用通配符*。这是浏览器安全机制的一部分，旨在防止在携带凭据（如Cookie）的跨域请求中过度放宽访问控制。开发者需注意，即使服务器返回了通配符，浏览器也会直接忽略并拒绝该响应，导致预检失败。
预检失败的实际影响
预检请求失败意味着浏览器会阻止实际请求的发送，前端会收到CORS错误，但服务器端可能看不到任何实际请求日志，因为请求从未发出。这会导致排查困难，容易误判为网络或后端问题。文章中的案例展示了错误配置下，即使Nginx返回204，浏览器仍会拦截，说明问题不在响应状态码，而在响应头是否符合规范。
修复配置的注意事项
修复方案是将通配符替换为显式列举的允许头和方法。但需注意，列举的值必须与实际请求中使用的头和方法匹配，否则仍会失败。例如，如果前端发送了自定义头，需确保其被包含在Allow-Headers中。此外，若涉及多个域名或动态头，可能需要动态生成响应头，而非静态配置。
Q&A
跨域预检请求失败时，浏览器报错“Request header field content-type is not allowed by Access-Control-Allow-Headers”是什么原因？
原因是Nginx返回的预检响应中Access-Control-Allow-Headers设置为*，但同时Access-Control-Allow-Credentials为true，根据W3C规范，credentials模式下不允许使用通配符*，浏览器会忽略该通配符并拒绝请求。
为什么Access-Control-Allow-Credentials为true时不能使用通配符*？
根据W3C Fetch规范，当credentials模式为include（即Access-Control-Allow-Credentials: true）时，Access-Control-Allow-Origin、Access-Control-Allow-Headers和Access-Control-Allow-Methods都不能使用通配符*，必须明确列出允许的值，否则浏览器会认为CORS响应无效并拦截请求。
如何修复Nginx配置中Access-Control-Allow-Headers为*导致的跨域预检失败？
将Nginx配置中的通配符*替换为显式列举的允许头和方法列表，例如将Access-Control-Allow-Headers设置为“content-type, authorization, x-requested-with, x-custom-header, accept, origin”，将Access-Control-Allow-Methods设置为“GET, POST, PUT, DELETE, OPTIONS, PATCH, HEAD”。
跨域预检请求中，Access-Control-Allow-Headers和Access-Control-Allow-Methods应该怎么设置？
在Access-Control-Allow-Credentials为true时，不能使用通配符*，必须显式列出允许的请求头和方法。例如，允许的请求头可设置为“content-type, authorization, x-requested-with, x-custom-header, accept, origin”，允许的方法可设置为“GET, POST, PUT, DELETE, OPTIONS, PATCH, HEAD”。
浏览器发送OPTIONS预检请求后，Nginx返回204但浏览器仍报CORS错误，可能是什么问题？
可能的原因是Nginx返回的预检响应中Access-Control-Allow-Headers或Access-Control-Allow-Methods使用了通配符*，而Access-Control-Allow-Credentials为true，导致浏览器忽略通配符并拒绝请求。需要将通配符替换为显式列举的值。
W3C Fetch规范中关于CORS预检和credentials模式有哪些限制？
根据W3C Fetch规范，当credentials模式为include（即Access-Control-Allow-Credentials: true）时，Access-Control-Allow-Origin、Access-Control-Allow-Headers和Access-Control-Allow-Methods都不能使用通配符*，必须明确列出允许的值，否则浏览器会认为CORS响应无效。
