Access-Control-Allow-Origin 详解

Access-Control-Allow-Origin 详解

1. 基本概念

Access-Control-Allow-Origin 是HTTP响应头中的一个字段，用于控制哪些外部域名可以访问当前服务器的资源。

简单来说：

• 这是一个"跨域访问许可证"
• 告诉浏览器：“我允许来自这些域名的请求访问我的资源”
• 是CORS（跨域资源共享）机制的核心部分

2. 语法和取值

语法格式

Access-Control-Allow-Origin: <origin> | *

具体取值

取值	含义	示例
*	允许所有域名访问	Access-Control-Allow-Origin: *
具体域名	只允许指定域名访问	Access-Control-Allow-Origin: https://example.com
null	不允许任何域名访问	Access-Control-Allow-Origin: null

3. 实际示例

示例1：允许所有域名（完全开放）

HTTP/1.1 200 OK
Access-Control-Allow-Origin: *
Content-Type: application/json

{"data": "所有域名都可以访问我"}

示例2：只允许特定域名

HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://www.example.com
Content-Type: application/json

{"data": "只有example.com可以访问我"}

示例3：允许多个域名（需要动态设置）

// 服务器端代码示例（Node.js）
const allowedOrigins = ['https://example.com', 'https://admin.example.com'];

app.use((req, res, next) => {
    const origin = req.headers.origin;
    if (allowedOrigins.includes(origin)) {
        res.header('Access-Control-Allow-Origin', origin);
    }
    next();
});

4. 工作原理

浏览器安全检查流程

// 假设你的网站: https://myapp.com
// API地址: https://api.service.com/data

// 浏览器发送请求前会检查：
// 1. 当前页面域名: https://myapp.com
// 2. 请求目标域名: https://api.service.com
// 3. 如果域名不同 → 触发CORS检查

fetch('https://api.service.com/data')
  .then(response => response.json())
  .then(data => console.log(data));

// 浏览器会：
// 1. 发送请求到 api.service.com
// 2. 检查响应头中的 Access-Control-Allow-Origin
// 3. 如果值是 * 或包含 https://myapp.com → 允许访问
// 4. 否则 → 阻止并报CORS错误

CORS错误示例

// 在 https://myapp.com 中执行：
fetch('https://api.other.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

// 如果 api.other.com 返回：
// Access-Control-Allow-Origin: https://another.com
// 或根本没有这个头部

// 控制台会显示：
// Access to fetch at 'https://api.other.com/data' from origin 'https://myapp.com' 
// has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present 
// on the requested resource.

5. 不同场景下的行为

场景1：同源请求（不需要CORS）

页面: https://api.example.com
请求: https://api.example.com/users

→ 不需要 Access-Control-Allow-Origin
→ 请求正常进行

场景2：跨域请求 + 允许所有

页面: https://myapp.com
请求: https://api.example.com/users
响应: Access-Control-Allow-Origin: *

→ CORS检查通过
→ 请求成功

场景3：跨域请求 + 允许特定域名

页面: https://myapp.com
请求: https://api.example.com/users
响应: Access-Control-Allow-Origin: https://myapp.com

→ CORS检查通过
→ 请求成功

场景4：跨域请求 + 域名不匹配

页面: https://myapp.com
请求: https://api.example.com/users
响应: Access-Control-Allow-Origin: https://other.com

→ CORS检查失败
→ 请求被浏览器阻止

6. 与其他CORS头部的关系

Access-Control-Allow-Origin 通常与其他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

相关头部说明：

头部	作用
Access-Control-Allow-Methods	允许的HTTP方法
Access-Control-Allow-Headers	允许的请求头
Access-Control-Allow-Credentials	是否允许携带凭证（cookies等）
Access-Control-Max-Age	预检请求缓存时间

7. 凭证（Cookies）的特殊情况

当使用 * 通配符时：

// ❌ 这样不行！
Access-Control-Allow-Origin: *
Access-Control-Allow-Credentials: true

// 浏览器会报错：
// The value of the 'Access-Control-Allow-Origin' header in the response 
// must not be the wildcard '*' when the request's credentials mode is 'include'

正确做法：

// ✅ 必须指定具体域名
Access-Control-Allow-Origin: https://myapp.com
Access-Control-Allow-Credentials: true

前端请求也要相应设置：

fetch('https://api.example.com/data', {
    credentials: 'include'  // 携带cookies
});

8. 服务器端配置示例

Node.js Express

// 允许所有域名（开发环境）
app.use((req, res, next) => {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
    res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
    next();
});

// 允许特定域名（生产环境）
app.use((req, res, next) => {
    const allowedOrigins = ['https://myapp.com', 'https://admin.myapp.com'];
    const origin = req.headers.origin;
    
    if (allowedOrigins.includes(origin)) {
        res.header('Access-Control-Allow-Origin', origin);
    }
    res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
    res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
    next();
});

Nginx配置

location /api/ {
    if ($http_origin ~* (https://myapp.com|https://admin.myapp.com)) {
        add_header 'Access-Control-Allow-Origin' '$http_origin';
    }
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization';
}

PHP配置

<?php
$allowedOrigins = [
    'https://myapp.com',
    'https://admin.myapp.com'
];

$origin = $_SERVER['HTTP_ORIGIN'] ?? '';

if (in_array($origin, $allowedOrigins)) {
    header("Access-Control-Allow-Origin: $origin");
}
header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE');
header('Access-Control-Allow-Headers: Content-Type, Authorization');
?>

9. 开发中的常见问题

问题1：本地开发CORS错误

// 本地开发：http://localhost:3000
// API：https://api.example.com

// 解决方案1：配置代理
// vite.config.js 或 webpack.config.js 中配置代理

// 解决方案2：浏览器禁用CORS（仅开发）
// Chrome启动参数：--disable-web-security --user-data-dir=/tmp

问题2：预检请求（Preflight）

对于复杂请求，浏览器会先发送OPTIONS预检请求：

// 前端发送复杂请求
fetch('https://api.example.com/data', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
        'X-Custom-Header': 'value'
    },
    body: JSON.stringify({ data: 'test' })
});

// 浏览器先发送OPTIONS请求检查CORS
// 服务器必须正确处理OPTIONS请求

10. 安全考虑

不安全的配置：

Access-Control-Allow-Origin: *
Access-Control-Allow-Credentials: true

→ 这会导致安全漏洞！

安全的最佳实践：

1. 生产环境不要使用 *
2. 明确指定允许的域名
3. 验证Origin头部的有效性
4. 使用HTTPS
5. 考虑使用CSRF令牌等其他安全措施

总结

Access-Control-Allow-Origin 的核心作用：

• 🛡️ 安全网关：控制哪些外部网站可以访问你的API
• 🌐 跨域桥梁：让浏览器允许跨域请求
• ⚙️ 配置灵活：支持通配符和具体域名配置

记住关键点：

• * = 允许所有域名（但不能与credentials一起使用）
• 具体域名 = 只允许该域名访问
• 没有这个头部 = 不允许任何跨域访问
• 这是服务器端的配置，前端无法修改