跨域请求不再头疼：用CORS Tester轻松调试API跨域问题

在现代 Web 开发中，前后端分离架构已成为主流，而跨域问题（CORS）则是开发者在进行 API 调用时经常遇到的难题。如何高效测试和调试跨域请求，成为开发过程中的一个重要环节。 为此，我开发了 **CORS Tester** —— 一个基于 React 的小工具，帮助开发者快速模拟跨域请求，查看响应数据与调试错误信息。本文将详细介绍该工具的使用方法，并简要说明跨域问题的原理与常见解决方案。  项目地址：[CORS Tester 懒猫应用商店链接](https://appstore.lazycat.cloud/#/shop/detail/xu.deploy.cors-tester) https://appstore.lazycat.cloud/#/shop/detail/xu.deploy.cors-tester ### 什么是跨域（CORS）？ 跨域（Cross-Origin）是指：浏览器在一个域名的网页中，向另一个不同源（协议、域名或端口任意一个不同）发起 HTTP 请求时，受到浏览器同源策略的限制。 这是浏览器为防止跨站脚本攻击（XSS）等安全问题而设计的安全机制。 #### 常见跨域场景示例： * 从 `http://example.com` 请求 `http://api.example.com`（子域不同） * 从 `http://example.com:8080` 请求 `http://example.com:3000`（端口不同） * 从 `http://example.com` 请求 `https://example.com`（协议不同） --- ### 跨域类型解析 跨域请求可分为 **简单跨域请求** 和 **复杂跨域请求**，二者的区别主要在于是否需要浏览器发起预检请求（preflight request）。 #### 1. 简单跨域请求 满足以下所有条件的请求被认为是“简单跨域”： * 请求方法是 `GET`、`POST` 或 `HEAD` * 请求头仅包含以下字段： * `Accept` * `Accept-Language` * `Content-Language` * `Content-Type`（且值仅限于 `text/plain`、`multipart/form-data`、`application/x-www-form-urlencoded`） * 不使用如 `ReadableStream` 等额外的高级特性 这类请求将 **直接发送**，无需浏览器先进行额外协商。 #### 2. 复杂跨域请求 若不满足上述任意一个条件，即被判定为“复杂跨域”请求，例如： * 请求方法为 `PUT`、`DELETE`、`PATCH` * 请求头中包含如 `Authorization`、`X-Custom-Header` 等自定义字段 * Content-Type 为 `application/json` 等非标准类型 此时浏览器会 **先发出一个预检请求（OPTIONS）**，向服务器询问是否允许本次请求。服务器响应中需明确指出允许的来源、方法和头部字段。 #### 二者的核心区别： | 项目 | 简单跨域 | 复杂跨域 | | --------------- | ----------------- | ------------------------ | | 是否发预检请求 | 否 | 是（OPTIONS 方法） | | 请求方法 | GET / POST / HEAD | PUT / DELETE / PATCH 等 | | 可使用的请求头 | 受限 | 可包含自定义头 | | Content-Type 类型 | 标准类型 | 可为 application/json 等自定义 | --- ### CORS Tester 工具介绍 **CORS Tester** 是一个开源的 React 应用，专为前端开发者打造，用于快速模拟和测试各种跨域请求行为。支持多种请求方法、可视化输入请求头与请求体，适合在开发阶段验证 API 是否允许跨域访问。 #### 核心功能： * 输入目标 API 的 URL * 支持多种请求方法：`GET`、`POST`、`PUT`、`DELETE`、`PATCH` * 自定义请求头与请求体（支持 JSON 格式） * 请求响应与错误信息可在浏览器控制台查看，方便调试 --- ### 快速开始 #### 1. 克隆代码并安装依赖 ```bash git clone git@github.com:Xu-Hardy/cors-tester.git cd cors-tester npm install ``` #### 2. 启动本地开发服务器 ```bash npm start ``` 访问 [http://localhost:3000](http://localhost:3000) 即可使用工具。 --- ### 使用步骤 1. **输入目标 URL** 填入你想测试的 API 地址，例如 `https://api.example.com/data` 2. **选择请求方法** 从下拉列表中选择请求方式，如 `GET`、`POST`、`PATCH` 等 3. **自定义请求头**（可选） 填写 JSON 格式的请求头，例如： ```json { "Content-Type": "application/json", "Authorization": "Bearer YOUR_TOKEN" } ``` 4. **填写请求体**（可选） 对于 `POST` 或 `PUT` 请求，可在请求体中填写 JSON 数据： ```json { "key": "value" } ``` 5. **发送请求并查看响应** 点击 “Send Request” 按钮，响应信息将输出到浏览器控制台中。 --- ### 写在最后 通过 **CORS Tester**，你可以方便地模拟和验证跨域请求的各种情况，无需手动配置代码或等待后端支持，从而更快定位问题、提高调试效率。 无论你是初学者还是资深开发者，理解 CORS 的原理、掌握预检机制、灵活测试接口行为，都是构建安全、高效 Web 应用不可或缺的一环。