UD5工具箱
常见问题
什么是CORS？
CORS（Cross-Origin Resource Sharing，跨域资源共享）是浏览器实施的一种安全机制，用于控制Web页面中的JavaScript代码是否可以读取不同源服务器上的资源。当页面发起跨域请求时，浏览器会自动添加Origin头部并在响应中检查CORS相关头部。如果服务器返回了正确的Access-Control-Allow-Origin头部且该头部的值匹配当前页面的源，浏览器才允许JavaScript代码读取响应内容。CORS是同源策略的安全扩展，它不阻止跨域请求的发送，而是控制跨域响应的可读性。
什么情况下会触发预检请求？
以下情况会触发浏览器自动发送OPTIONS预检请求：HTTP方法不是GET、HEAD或POST（如PUT、DELETE、PATCH等）；请求包含CORS安全头部列表之外的自定义头部（如Authorization、X-Requested-With、X-Custom-Header等）；Content-Type头部的值不是application/x-www-form-urlencoded、multipart/form-data或text/plain之一（如application/json、application/xml等）；请求中设置了credentials: include。预检请求先于实际请求发送，服务器需要在OPTIONS响应中返回相应的CORS头部。
简单请求和预检请求有什么区别？
简单请求满足特定条件（GET/HEAD/POST方法 + 安全头部 + 安全Content-Type），浏览器直接发送请求，在响应中检查CORS头部。预检请求是浏览器在发送实际请求之前自动发送的OPTIONS请求，用于询问服务器是否允许实际请求的方法、头部和凭证。预检请求通过后，浏览器才会发送实际的请求。预检机制增加了请求的延迟（多一次OPTIONS往返），但为服务器提供了拦截和拒绝潜在危险跨域请求的能力。
Access-Control-Allow-Origin设置为*有什么限制？
Access-Control-Allow-Origin设置为通配符*表示允许所有源的跨域访问，但有重要限制：当请求携带凭证（credentials: include或Cookie）时，不能使用通配符*，必须指定具体的源（如https://example.com）。这是因为通配符*配合凭证可能导致CSRF攻击——任何网站都可以携带用户的Cookie发起跨域请求。在实际项目中，建议根据业务需求动态匹配Origin头部的值，返回具体的源而非通配符。
常见CORS错误有哪些？如何排查？
常见CORS错误及排查方法：1）"No 'Access-Control-Allow-Origin' header is present"——服务器未返回CORS头部，需要在后端配置CORS中间件；2）"The value of the 'Access-Control-Allow-Origin' header must not be the wildcard '*'"——使用凭证时不能用通配符，改为具体源；3）"Method PUT is not allowed by Access-Control-Allow-Methods"——预检响应中Allow-Methods未包含使用的HTTP方法；4）"Header 'X-Custom' is not allowed by Access-Control-Allow-Headers"——自定义头部未在Allow-Headers中声明。使用本工具的预检检测功能可以快速定位问题。
后端如何正确配置CORS？
后端CORS配置的核心要点：1）设置Access-Control-Allow-Origin为具体的源或动态匹配Origin头部；2）对于需要凭证的场景，同时设置Access-Control-Allow-Credentials: true；3）在预检响应中设置Access-Control-Allow-Methods列出所有允许的HTTP方法；4）在预检响应中设置Access-Control-Allow-Headers包含所有自定义头部；5）根据需要设置Access-Control-Max-Age缓存预检结果（减少OPTIONS请求次数）；6）在预检响应中设置Access-Control-Expose-Headers使JavaScript可以读取自定义响应头。推荐使用成熟的CORS中间件（如Express的cors包、Spring的@CrossOrigin注解等）而非手动拼接头部。