// 同源策略禁止以下操作：
// 1. 读取跨源响应
fetch('https://api.other.com/data'); // ❌ 被阻止

// 2. 访问跨源 DOM
document.querySelector('iframe').contentDocument; // ❌ 被阻止

// 3. 读取跨源 Cookie
// 不同域名的 Cookie 互相隔离

// Express.js — 简单 CORS
const cors = require('cors');

// 允许所有来源（仅开发环境）
app.use(cors());

// 允许特定来源
app.use(cors({
    origin: 'https://frontend.example.com',
    methods: ['GET', 'POST'],
    allowedHeaders: ['Content-Type']
}));

# Nginx CORS 配置
location /api/ {
    # 允许的来源
    add_header 'Access-Control-Allow-Origin' 'https://frontend.example.com';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'Content-Type';
    
    # 处理预检请求
    if ($request_method = 'OPTIONS') {
        return 204;
    }
    
    proxy_pass http://backend;
}

const cors = require('cors');

const corsOptions = {
    origin: function(origin, callback) {
        const allowedOrigins = [
            'https://frontend.example.com',
            'https://admin.example.com'
        ];
        
        // 允许无 origin（如 curl、Postman）
        if (!origin || allowedOrigins.includes(origin)) {
            callback(null, true);
        } else {
            callback(new Error('不允许的跨域请求'));
        }
    },
    methods: ['GET', 'POST', 'PUT', 'DELETE', 'PATCH'],
    allowedHeaders: [
        'Content-Type',
        'Authorization',
        'X-Request-ID'
    ],
    exposedHeaders: [
        'X-Total-Count',
        'X-Page-Count'
    ],
    credentials: true,      // 允许携带 Cookie
    maxAge: 86400,          // 预检缓存 24 小时
    optionsSuccessStatus: 204
};

app.use(cors(corsOptions));

// 客户端
fetch('https://api.example.com/data', {
    credentials: 'include',  // 携带 Cookie
    headers: {
        'Content-Type': 'application/json'
    }
});

# 服务端响应
Access-Control-Allow-Origin: https://frontend.example.com  # 不能用 *
Access-Control-Allow-Credentials: true

server {
    listen 443 ssl;
    server_name api.example.com;
    
    # CORS 配置
    set $cors_origin "";
    
    if ($http_origin ~* "^https://(app|admin)\.example\.com$") {
        set $cors_origin $http_origin;
    }
    
    # 通用 CORS 头
    add_header 'Access-Control-Allow-Origin' $cors_origin always;
    add_header 'Access-Control-Allow-Credentials' 'true' always;
    add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, PATCH, OPTIONS' always;
    add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization' always;
    add_header 'Access-Control-Expose-Headers' 'X-Total-Count,X-Page-Count' always;
    add_header 'Access-Control-Max-Age' 86400 always;
    
    # 预检请求处理
    if ($request_method = 'OPTIONS') {
        return 204;
    }
    
    location /api/ {
        proxy_pass http://backend;
    }
}

<!-- JSONP 原理 -->
<script>
function handleData(data) {
    console.log(data);
}
</script>
<script src="https://api.example.com/data?callback=handleData"></script>

<!-- 服务端返回 -->
<!-- handleData({"users": [...]}) -->

// 微前端架构中的 CORS 配置
const corsOptions = {
    origin: [
        'https://main-app.example.com',
        'https://micro-app-1.example.com',
        'https://micro-app-2.example.com'
    ],
    credentials: true,
    maxAge: 86400
};

// 或使用动态白名单
const corsOptions = {
    origin: function(origin, callback) {
        // 从数据库或配置服务读取允许的域名
        getAllowedOrigins().then(origins => {
            if (!origin || origins.includes(origin)) {
                callback(null, true);
            } else {
                callback(new Error('CORS not allowed'));
            }
        });
    }
};