CORS 问题检测工具

检测跨域资源共享配置 · 诊断 CORS 错误 · 本地测试不外传

请求配置
检测结果
配置请求参数后，点击「开始检测」进行 CORS 问题诊断

什么是 CORS 问题检测工具？

CORS（Cross-Origin Resource Sharing，跨域资源共享）问题检测工具是一个在线工具，用于检测和分析服务器的 CORS 配置是否正确。

CORS 是浏览器的安全机制，用于控制网页能否访问不同源（协议、域名、端口）的资源。当浏览器阻止跨域请求时，通常会在控制台显示 CORS 错误信息。

IqsBot CORS 问题检测工具提供纯浏览器端运行——你的请求配置不会上传到任何服务器，保护你的隐私安全。

为什么需要 CORS 问题检测工具？

在前后端分离的开发模式中，CORS 问题是前端开发者最常遇到的错误之一：

  • 快速定位 CORS 配置问题，节省调试时间
  • 检测服务器是否正确返回 CORS 响应头
  • 验证预检请求（OPTIONS）是否被正确处
  • 检查携带凭据（Cookies、HTTP 认证）时的 CORS 配置
  • 确保生产环境的 CORS 配置符合安全要求

使用 IqsBot CORS 问题检测工具，你可以：

  • 输入目标 URL 和请求配置，一键检测 CORS 问题
  • 查看详细的检测报告，包括所有 CORS 响应头
  • 获取针对性的诊断建议和修复方案
  • 纯浏览器端运行，无需安装任何软件

如何使用 IqsBot CORS 问题检测工具？

基础用法

  1. 输入请求 URL：在"请求配置"面板中输入要测试的目标 URL
  2. 选择请求方法：支持 GET、POST、PUT、DELETE、PATCH、OPTIONS
  3. 配置请求头：在"自定义请求头"中输入 JSON 格式的请求头（可选）
  4. 开始检测：点击"开始检测"按钮，工具会发送请求并分析响应
  5. 查看结果：在右侧面板查看检测结果和诊断建议

高级选项

选项 说明
携带凭据 模拟携带 Cookies 或 HTTP 认证信息的请求
跟随重定向 自动跟随 HTTP 重定向（301、302 等）

常见 CORS 错误及解决方案

错误信息 原因 解决方案
No 'Access-Control-Allow-Origin' header 服务器未返回 CORS 头 在服务器响应中添加 Access-Control-Allow-Origin
Method not allowed 请求方法未被允许 在服务器配置中添加 Access-Control-Allow-Methods
Request header field is not allowed 自定义请求头未被允许 在服务器配置中添加 Access-Control-Allow-Headers
Credentials mode is 'include' 携带凭据时使用了通配符 * 将 Access-Control-Allow-Origin 改为具体域名，并设置 Access-Control-Allow-Credentials: true

CORS 响应头详解

Access-Control-Allow-Origin

指定哪些源可以访问资源。可以设置为：

  • 具体域名：https://www.example.com
  • 通配符：*（但不适用于携带凭据的请求）

Access-Control-Allow-Methods

指定允许的 HTTP 请求方法，多个方法用逗号分隔：

Access-Control-Allow-Methods: GET, POST, PUT, DELETE, PATCH, OPTIONS

Access-Control-Allow-Headers

指定允许的自定义请求头：

Access-Control-Allow-Headers: Content-Type, Authorization, X-Requested-With

Access-Control-Allow-Credentials

指定是否允许携带凭据（Cookies、HTTP 认证信息）：

Access-Control-Allow-Credentials: true

Access-Control-Expose-Headers

指定哪些响应头可以暴露给浏览器：

Access-Control-Expose-Headers: X-Custom-Header, X-Request-Id

Access-Control-Max-Age

指定预检请求（OPTIONS）的缓存时间（秒）：

Access-Control-Max-Age: 86400

服务器端 CORS 配置示例

Node.js / Express

const cors = require('cors');
const app = express();

app.use(cors({
  origin: 'https://www.example.com',
  credentials: true,
  methods: ['GET', 'POST', 'PUT', 'DELETE', 'PATCH', 'OPTIONS'],
  allowedHeaders: ['Content-Type', 'Authorization']
}));

Nginx

location /api/ {
    add_header Access-Control-Allow-Origin https://www.example.com;
    add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,PATCH,OPTIONS;
    add_header Access-Control-Allow-Headers Content-Type,Authorization;
    add_header Access-Control-Allow-Credentials true;
    
    if ($request_method = OPTIONS) {
        return 204;
    }
}

Spring Boot

@Configuration
public class CorsConfig {
    @Bean
    public CorsFilter corsFilter() {
        CorsConfiguration config = new CorsConfiguration();
        config.addAllowedOrigin("https://www.example.com");
        config.addAllowedMethod("*");
        config.addAllowedHeader("*");
        config.setAllowCredentials(true);
        
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", config);
        return new CorsFilter(source);
    }
}

常见问题

Q: CORS 是服务器问题还是前端问题？

A: CORS 是服务器的安全策略。 浏览器会阻止不符合 CORS 规则的跨域请求，但 CORS 头需要在服务器端配置。前端无法直接解决 CORS 问题，需要后端开发人员配置服务器。

Q: 为什么本地开发时会出现 CORS 错误？

A: 本地开发时前端和后端通常运行在不同端口，属于跨域请求。解决方法：

  1. 后端配置 CORS 允许本地开发域名（如 http://localhost:3000）
  2. 使用开发代理（如 webpack-dev-server 的 proxy）
  3. 使用 Chrome 插件临时禁用 CORS（仅用于开发）

Q: 使用通配符 * 是否安全？

A: 不推荐在生产环境使用 *。 通配符允许任何网站访问你的资源，可能导致安全问题。生产环境应明确指定允许的域名。

Q: 携带 Cookies 时为什么不能使用通配符 *？

A: 这是浏览器的安全限制。 当请求携带凭据（Cookies、HTTP 认证）时，Access-Control-Allow-Origin 必须设置为具体的域名，不能使用通配符 *。

Q: 预检请求（OPTIONS）是什么？

A: 预检请求是浏览器在发送某些跨域请求之前自动发送的 OPTIONS 请求，用于询问服务器是否允许实际的请求。需要预检的请求包括：

  • 使用了 GET、POST、HEAD 之外的方法
  • 使用了自定义请求头
  • 请求体为 application/json

Q: 和其他 CORS 测试工具相比有什么优势？

A: 核心优势是简单易用和功能全面：

  1. 纯浏览器端运行：请求配置不会上传到服务器，保护隐私
  2. 详细检测报告：显示所有 CORS 响应头，帮助快速定位问题
  3. 诊断建议：根据检测结果提供针对性的修复方案
  4. 支持多种配置：支持自定义请求头、请求方法、凭据模式等
  5. 无需安装：打开网页即可使用，无需安装任何软件或浏览器插件