CORS 测试工具

测试和调试跨域资源共享（CORS）策略和 API 请求

请求设置

配置您的 API 请求以进行测试

URL

HTTP 方法

请求头

示例请求

尝试这些预定义的 API 请求

CORS 信息

关于 CORS 的基本信息

什么是 CORS？ CORS（跨域资源共享）是一种机制，允许 Web 浏览器从浏览器中运行的脚本向不同的源（不同的域、协议或端口）发出跨源请求。

关键 CORS 头

Access-Control-Allow-Origin: 指定允许访问资源的源
Access-Control-Allow-Methods: 指定允许的 HTTP 方法
Access-Control-Allow-Headers: 指定可以使用的 HTTP 头
Access-Control-Allow-Credentials: 指定是否包含凭据（cookie、HTTP 身份验证）

💡 CORS 解决方案

服务器端解决方案

1. Express.js (Node.js):

const cors = require('cors');
          app.use(cors({
            origin: 'https://example.com',
            methods: ['GET', 'POST'],
            credentials: true
          }));

2. Spring Boot (Java):

@CrossOrigin(origins = "https://example.com")
          @RestController
          public class ApiController { ... }

客户端解决方案

1. 使用代理服务器：

// package.json (React)
          "proxy": "http://localhost:3001"

2. JSONP（仅限 GET）：

// 有限但简单的解决方案
          fetch('api?callback=handleResponse')

🔧 按环境配置 CORS

Next.js

// next.config.js
          module.exports = {
            async headers() {
              return [
                {
                  source: '/api/:path*',
                  headers: [
                    {
                      key: 'Access-Control-Allow-Origin',
                      value: '*'
                    }
                  ]
                }
              ]
            }
          }

Nginx

location /api {
            add_header Access-Control-Allow-Origin *;
            add_header Access-Control-Allow-Methods 
              "GET, POST, OPTIONS";
            add_header Access-Control-Allow-Headers 
              "Content-Type, Authorization";
          }

Apache

# .htaccess
          Header always set Access-Control-Allow-Origin "*"
          Header always set Access-Control-Allow-Methods 
            "GET, POST, OPTIONS"
          Header always set Access-Control-Allow-Headers 
            "Content-Type, Authorization"

按环境配置 CORS

测试场景

• 简单请求: 使用 GET 请求测试基本 CORS 行为
• 预检请求: 使用 PUT/DELETE 方法测试预检请求
• 自定义头: 使用 Authorization 头测试请求
• 凭据: 测试带 cookie 的请求
• 错误处理: 测试失败情况

安全考虑

• 由于安全风险，使用通配符（*）时要谨慎
• 最小权限原则：只允许必要的源和方法
• 凭据限制：包含凭据时只允许特定源
• 定期审查：定期审查和更新 CORS 策略

CORS 调试技巧

浏览器开发者工具

• 在网络选项卡中检查 OPTIONS 请求
• 在控制台中查找 CORS 错误消息
• 在响应头中验证 CORS 头

有用的工具

• CORS 测试工具（此工具）
• Postman（用于 API 测试）
• curl 命令（用于直接服务器测试）