前端 CORS 跨域与 Cookie 策略：SameSite、跨域携带凭证实战

1
// server.js - Express 后端 CORS 配置
2
const express = require('express');
3
const cors = require('cors');
4
const app = express();
5

6
const ALLOWED_ORIGIN = 'https://app.example.com';
7

8
// 手动配置 CORS（推荐，比 cors 中间件更灵活）
9
app.use((req, res, next) => {
10
  const origin = req.headers.origin;
11

12
  // 验证 Origin 是否在白名单中
13
  if (origin === ALLOWED_ORIGIN) {
14
    res.setHeader('Access-Control-Allow-Origin', origin);  // 不能用 *
15
    res.setHeader('Access-Control-Allow-Credentials', 'true');
16
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
17
    res.setHeader('Access-Control-Allow-Headers', 'content-type, authorization');
18
    res.setHeader('Access-Control-Max-Age', '86400');
19
  }
20

21
  // 处理预检请求
22
  if (req.method === 'OPTIONS') {
23
    return res.sendStatus(204);
24
  }
25

26
  next();
27
});
28

29
// 设置 Cookie
30
app.post('/api/login', (req, res) => {
31
  const token = generateToken(req.body.username);
32
  res.cookie('session_id', token, {
33
    httpOnly: true,      // 防 XSS
34
    secure: true,        // 仅 HTTPS（SameSite=None 必须）
35
    sameSite: 'none',    // 允许跨域发送
36
    path: '/',
37
    maxAge: 7 * 24 * 60 * 60 * 1000,  // 7 天
38
  });
39
  res.json({ success: true });
40
});
41

42
// 验证 Cookie
43
app.get('/api/profile', (req, res) => {
44
  const sessionId = req.cookies?.session_id;
45
  if (!sessionId) {
46
    return res.status(401).json({ error: '未登录' });
47
  }
48
  const user = verifyToken(sessionId);
49
  res.json({ user });
50
});
51

52
app.listen(3000);

1
# main.py - FastAPI 后端 CORS 配置
2
from fastapi import FastAPI, Response, Request
3
from fastapi.middleware.cors import CORSMiddleware
4

5
app = FastAPI()
6

7
# 使用 FastAPI 内置 CORS 中间件
8
app.add_middleware(
9
    CORSMiddleware,
10
    allow_origins=["https://app.example.com"],  # 精确匹配，不能用 ["*"]
11
    allow_credentials=True,                      # 允许携带凭证
12
    allow_methods=["GET", "POST", "PUT", "DELETE", "OPTIONS"],
13
    allow_headers=["content-type", "authorization"],
14
    max_age=86400,
15
)
16

17
@app.post("/api/login")
18
async def login(response: Response):
19
    token = generate_token("user123")
20
    # 关键：same_site="none" + secure=True
21
    response.set_cookie(
22
        key="session_id",
23
        value=token,
24
        httponly=True,
25
        secure=True,
26
        samesite="none",
27
        max_age=7 * 24 * 60 * 60,
28
        path="/",
29
    )
30
    return {"success": True}
31

32
@app.get("/api/profile")
33
async def get_profile(request: Request):
34
    session_id = request.cookies.get("session_id")
35
    if not session_id:
36
        return {"error": "未登录"}
37
    user = verify_token(session_id)
38
    return {"user": user}