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

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

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

什么是跨域（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），向服务器询问是否允许本次请求。服务器响应中需明确指出允许的来源、方法和头部字段。

二者的核心区别：

CORS Tester 工具介绍

CORS Tester 是一个开源的 React 应用，专为前端开发者打造，用于快速模拟和测试各种跨域请求行为。支持多种请求方法、可视化输入请求头与请求体，适合在开发阶段验证 API 是否允许跨域访问。

核心功能：

• 输入目标 API 的 URL
• 支持多种请求方法：GET、POST、PUT、DELETE、PATCH
• 自定义请求头与请求体（支持 JSON 格式）
• 请求响应与错误信息可在浏览器控制台查看，方便调试

快速开始

1. 克隆代码并安装依赖

git clone git@github.com:Xu-Hardy/cors-tester.git
cd cors-tester
npm install

2. 启动本地开发服务器

npm start

访问 http://localhost:3000 即可使用工具。

使用步骤

1. 输入目标 URL
   填入你想测试的 API 地址，例如 https://api.example.com/data

2. 选择请求方法
   从下拉列表中选择请求方式，如 GET、POST、PATCH 等

3. 自定义请求头（可选）
   填写 JSON 格式的请求头，例如：

   {
     "Content-Type": "application/json",
     "Authorization": "Bearer YOUR_TOKEN"
   }
   

4. 填写请求体（可选）
   对于 POST 或 PUT 请求，可在请求体中填写 JSON 数据：

   {
     "key": "value"
   }
   

5. 发送请求并查看响应
   点击 “Send Request” 按钮，响应信息将输出到浏览器控制台中。

写在最后

通过 CORS Tester，你可以方便地模拟和验证跨域请求的各种情况，无需手动配置代码或等待后端支持，从而更快定位问题、提高调试效率。

无论你是初学者还是资深开发者，理解 CORS 的原理、掌握预检机制、灵活测试接口行为，都是构建安全、高效 Web 应用不可或缺的一环。