UD5工具箱
使用教程
第一步：了解CORS基础概念
CORS（Cross-Origin Resource Sharing）是浏览器的一种安全机制。当JavaScript代码发起跨域HTTP请求时，浏览器会根据CORS规范检查服务器是否允许该请求。CORS的核心是服务器通过响应头（如Access-Control-Allow-Origin）告知浏览器允许哪些源访问资源。CORS请求分为简单请求和预检请求两类：简单请求直接发送，预检请求需要先发送OPTIONS请求获得服务器授权后再发送实际请求。
第二步：构建一个简单的GET请求
在请求构建器中，默认设置为GET方法。保持默认的请求头不变，直接点击"构建请求"按钮。工具会显示这是一个简单请求，不需要预检。响应面板中会展示模拟的CORS响应，包括Access-Control-Allow-Origin头部。此时，预检检测器会显示"无需预检"的提示，因为GET方法加上标准头部属于CORS简单请求的范畴。
第三步：切换到POST方法并设置Content-Type
将HTTP方法切换为POST，Content-Type保持为application/json。点击构建请求后，你会发现预检检测器显示"需要预检"，因为application/json不是CORS安全的Content-Type（安全的只有application/x-www-form-urlencoded、multipart/form-data和text/plain）。工具会展示预检请求的参数：OPTIONS方法、Origin头部、Access-Control-Request-Method: POST、Access-Control-Request-Headers: Content-Type。
第四步：添加自定义请求头
在请求头区域点击"添加头部"按钮，添加一个自定义头部如X-Custom-Header: test-value。添加后预检检测器会更新，显示Access-Control-Request-Headers中包含了Content-Type和X-Custom-Header。在服务器端的CORS配置中，需要在Access-Control-Allow-Headers中声明这两个头部，否则预检请求会失败。
第五步：测试凭证模式
将凭证模式从omit切换为include。工具会立即显示一个重要提示：当使用凭证模式时，Access-Control-Allow-Origin不能使用通配符*，必须指定具体的源（如https://example.com）。这是因为安全规范禁止在发送凭证的跨域请求中使用通配符，以防止CSRF攻击。观察预检请求和实际请求中Cookie头部的包含情况。
第六步：生成cURL命令
在完成请求构建后，点击"生成cURL"按钮。工具会根据当前的所有配置参数生成完整的cURL命令，包括请求方法、所有头部（包括CORS相关的Origin头部和凭证设置）、请求体内容等。复制生成的命令到终端中执行，可以验证服务器的实际CORS行为。cURL命令使用了-v选项，执行时会显示完整的请求和响应头信息。
第七步：理解预检请求流程
使用预检检测功能深入了解预检请求的完整流程。当检测到需要预检时，工具会展示两步请求的时序图：第一步是OPTIONS预检请求，服务器需要返回Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers等头部；第二步是实际请求，浏览器根据预检结果决定是否发送实际请求和是否允许JavaScript读取响应。理解这个流程对于正确配置后端CORS至关重要。
第八步：排查实际CORS错误
当在实际项目中遇到CORS错误时，使用本工具重现请求配置。将浏览器控制台中的CORS错误信息中的关键参数（方法、头部、凭证设置）输入到工具中，通过预检检测功能判断问题出在预检请求还是实际请求。常见问题包括：服务器未返回Access-Control-Allow-Origin头部、Allow-Origin与Credentials冲突、Allow-Headers未包含自定义头部、Allow-Methods未包含使用的HTTP方法等。通过工具的分析功能可以快速定位问题所在。