1
https://api.example.com:8080
2
└─┬──┘ └───────┬─────┘ ┊
3
协议    域名         端口

1
// 以下操作受同源策略限制
2
fetch("https://other-domain.com/api"); // 跨域请求
3
localStorage.setItem("key", "value"); // 跨域存储
4
Cookie.set("token", "abc"); // 跨域 Cookie

1
// 前端设置 credentials
2
fetch("https://api.example.com", {
3
  credentials: "include", // 包含 Cookie
4
});

1
# 服务端允许凭证
2
response["Access-Control-Allow-Origin"] = "https://my-site.com"  # 不能是 *
3
response["Access-Control-Allow-Credentials"] = "true"

1
Set-Cookie: session=abc123;
2
    Domain=.example.com;  # 子域可访问
3
    Path=/;               # 路径
4
    HttpOnly;             # 禁止 JS 访问
5
    Secure;               # 仅 HTTPS
6
    SameSite=Lax          # CSRF 保护

1
# Python/Flask 实现
2
@app.before_request
3
def handle_cors():
4
    if request.method == "OPTIONS":
5
        response = make_response("", 200)
6
        response.headers["Access-Control-Allow-Origin"] = ALLOWED_ORIGIN
7
        response.headers["Access-Control-Allow-Methods"] = "GET,POST,PUT,DELETE,OPTIONS"
8
        response.headers["Access-Control-Allow-Headers"] = "Content-Type,Authorization"
9
        response.headers["Access-Control-Max-Age"] = "3600"
10
        return response
11

12
    # 普通请求添加 CORS 头
13
    response.headers["Access-Control-Allow-Origin"] = ALLOWED_ORIGIN

1
ALLOWED_ORIGINS = {
2
    "https://my-site.com",
3
    "https://admin.my-site.com"
4
}
5

6
def validate_origin(origin: str) -> bool:
7
    if origin in ALLOWED_ORIGINS:
8
        return True
9
    # 支持子域名匹配
10
    if origin.endswith(".my-site.com"):
11
        return True
12
    return False

1
Access to fetch at 'https://api.example.com' from origin
2
'https://my-site.com' has been blocked by CORS policy
3

4
No 'Access-Control-Allow-Origin' header is present on
5
the requested resource.

1
// 在浏览器控制台查看详细错误
2
// 1. Network 面板查看预检请求
3
// 2. Console 查看 CORS 错误详情
4
// 3. 验证 Origin 和 Allow-Origin 是否匹配

1
# 不安全的配置
2
response.headers["Access-Control-Allow-Origin"] = "*"
3

4
# 安全的配置
5
ALLOWED_ORIGINS = {"https://my-site.com"}
6
if origin in ALLOWED_ORIGINS:
7
    response.headers["Access-Control-Allow-Origin"] = origin

1
<!-- Content Security Policy -->
2
<meta
3
  http-equiv="Content-Security-Policy"
4
  content="default-src 'self';
5
               connect-src 'self' https://api.example.com;"
6
/>