CORS 预检请求模拟器
纯前端CORS规则模拟工具，按规范判断跨域请求是否触发预检OPTIONS请求，并模拟服务器响应头判断请求能否通过CORS检查，教学调试向，不发起真实网络请求。
免费在线工具
Loading…
使用说明
- 在「请求场景」区配置：请求方法（GET/POST/PUT等）、发起页面Origin、目标API Origin、Content-Type、自定义请求头列表
- 工具实时判定该请求是否符合「简单请求」条件，若不符合则会触发浏览器预检OPTIONS请求，并列出具体触发原因
- 在「服务器响应头」区填写模拟的 Access-Control-Allow-Origin / Allow-Methods / Allow-Headers / Allow-Credentials 等响应头，以及是否携带凭证（withCredentials）
- 工具判断该响应能否让请求通过CORS检查，逐条给出通过或拦截的具体原因（如Origin不匹配、Methods未包含请求方法等）
- 点击「加载示例场景」可一键加载一个会触发预检的例子和一个不会触发预检的例子，对比学习
功能介绍
- 按Fetch标准的"simple request"判定规则，检查请求方法（仅GET/HEAD/POST）、Content-Type（仅三种简单类型）、自定义请求头（仅安全列表内）三项条件，判断是否触发预检
- 不符合任一条件即判定为需要预检，并逐条列出具体触发原因，帮助理解CORS判定逻辑
- 模拟校验服务器CORS响应头：Access-Control-Allow-Origin（含通配符*与凭证冲突检测）、Allow-Methods、Allow-Headers、Allow-Credentials，判断请求能否最终通过
- 纯前端规则计算，不真实发起任何网络请求，适合学习CORS原理与调试跨域配置问题
使用场景
排查前端跨域请求被拦截的原因
把实际请求的方法、头、Content-Type填入工具，快速判断问题出在预检触发条件还是服务器响应头配置
设计后端CORS响应头配置
后端开发在配置Access-Control-Allow-Origin/Methods/Headers前，先用工具模拟验证配置是否能覆盖前端实际发出的请求
学习理解CORS simple request判定规则
通过修改不同参数观察判定结果变化，直观掌握哪些方法/头/Content-Type组合会触发预检
验证携带Cookie的跨域请求配置
勾选withCredentials后测试，理解为什么Allow-Origin为通配符*时凭证请求必然被拦截，必须使用具体域名+Allow-Credentials:true
常见问题
什么是CORS预检（Preflight）请求？
当浏览器判断一个跨域请求不满足"简单请求"（simple request）条件时，会先自动发送一个OPTIONS方法的预检请求询问服务器是否允许该跨域请求，服务器通过Access-Control-Allow-*系列响应头回应，浏览器确认允许后才会真正发出原始请求。这是浏览器的安全机制，本工具只做规则判定，不会真实发送任何请求。
什么样的请求算作简单请求，不会触发预检？
同时满足三个条件：方法只能是GET、HEAD或POST；请求头只能是安全列表内的几个（Accept、Accept-Language、Content-Language、Content-Type）；如果设置了Content-Type，取值只能是application/x-www-form-urlencoded、multipart/form-data、text/plain三种之一。三个条件全部满足才是简单请求，任意一个不满足都会触发预检。
为什么 Access-Control-Allow-Origin 设为 * 时，我的携带Cookie的请求还是失败？
这是CORS规范的强制规则：出于安全考虑，通配符*不能与凭证请求（withCredentials/携带Cookie）同时使用。如果请求需要携带凭证，服务器必须把Access-Control-Allow-Origin设成发起请求的具体域名（不能是*），并同时设置Access-Control-Allow-Credentials: true，两者缺一不可。
这个工具会真的发起跨域请求测试吗？
不会。这是一个纯前端的CORS规则模拟/教学工具，所有判定都基于你填写的场景参数按CORS规范逻辑推理得出，不会向任何目标地址发起真实网络请求，可以放心用来做教学演示或排查思路验证。