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

在现代 Web 开发中，前后端分离架构已成为主流，而跨域问题（CORS）则是开发者在进行 API 调用时经常遇到的难题。如何高效测试和调试跨域请求，成为开发过程中的一个重要环节。

为此，我开发了 **CORS Tester** —— 一个基于 React 的小工具，帮助开发者快速模拟跨域请求，查看响应数据与调试错误信息。本文将详细介绍该工具的使用方法，并简要说明跨域问题的原理与常见解决方案。

![image.png](https://dl.playground.lazycat.cloud/guidelines/459/271af1b0-bf89-4144-b577-e8557625bd66.png)

项目地址：[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 应用不可或缺的一环。