什么是 CORS？

CORS（跨源资源共享）是一种安全机制，允许 Web 浏览器向与提供网页的域不同的服务器发出请求。它使用 HTTP 头来告诉浏览器应该允许哪些跨源请求。

快速了解

全称跨源资源共享
创建时间2004 年（初始提案），2014 年（W3C 推荐标准）
规范文档官方规范

CORS 工作原理

CORS 的开发是为了放宽同源策略，默认情况下同源策略会阻止网页向不同域发出请求。当浏览器发出跨源请求时，它首先发送预检 OPTIONS 请求以检查服务器是否允许实际请求。服务器响应 CORS 头，指示允许哪些源、方法和头。CORS 对于使用来自不同域的 API 的现代 Web 应用程序至关重要。配置错误的 CORS 可能导致安全漏洞或请求被阻止。

主要特点

  • 放宽同源策略限制
  • 使用 HTTP 头进行访问控制
  • 预检请求检查权限
  • 由服务器端配置控制
  • 支持凭据（cookie、认证头）
  • 可以指定允许的源、方法、头

常见用途

  1. 使用第三方 API
  2. 微服务架构
  3. CDN 资源加载
  4. 单页应用
  5. 跨域字体加载

示例

CORS 响应头：

Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Allow-Credentials: true
Access-Control-Max-Age: 86400

预检请求：
OPTIONS /api/data HTTP/1.1
Origin: https://example.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: Content-Type

预检响应：
HTTP/1.1 204 No Content
Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: POST
Access-Control-Allow-Headers: Content-Type

Node.js/Express CORS：
app.use(cors({
  origin: 'https://example.com',
  methods: ['GET', 'POST'],
  credentials: true
}));

QubitTool 相关工具

JSON 格式化工具

格式化 API 响应

相关概念

HTTPAPI