CORS 跨域

约 653 字大约 2 分钟

布欧-Lewyon

2026-05-15

CORS（Cross-Origin Resource Sharing）是浏览器的一种安全机制，限制不同源的网页访问当前域的资源。Nginx 可以统一添加 CORS 响应头。

基础 CORS 配置

location /api/ {
    # 允许所有来源（不推荐生产）
    add_header Access-Control-Allow-Origin "*";

    # 指定来源（生产推荐）
    add_header Access-Control-Allow-Origin "https://app.example.com";

    # 允许的 HTTP 方法
    add_header Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS";

    # 允许的请求头
    add_header Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept, Authorization";

    # 凭证（Cookie、Authorization 头）需要特定来源
    add_header Access-Control-Allow-Credentials "true";

    # 预检请求缓存时间（秒）
    add_header Access-Control-Max-Age 86400;

    # 代理后端
    proxy_pass http://backend:3000;
}

预检请求处理

浏览器在发送跨域非简单请求（如 PUT、DELETE、自定义头、application/json 等）之前，会先发送一个 OPTIONS 请求。

location /api/ {
    # 处理 OPTIONS 预检请求
    if ($request_method = OPTIONS) {
        add_header Access-Control-Allow-Origin "https://app.example.com";
        add_header Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS";
        add_header Access-Control-Allow-Headers "Content-Type, Authorization";
        add_header Access-Control-Max-Age 86400;
        add_header Content-Length 0;
        add_header Content-Type text/plain;
        return 204;
    }

    # 其他请求正常处理
    proxy_pass http://backend:3000;
    add_header Access-Control-Allow-Origin "https://app.example.com" always;
}

动态 Origin（多个域名）

# 动态设置 Access-Control-Allow-Origin
map $http_origin $cors_origin {
    default "";
    "~^https?://(app\.example\.com|admin\.example\.com)$" $http_origin;
    "~^https?://localhost:3000$" $http_origin;
}

server {
    listen 80;
    server_name api.example.com;

    location / {
        add_header Access-Control-Allow-Origin $cors_origin always;
        add_header Access-Control-Allow-Methods "GET, POST, OPTIONS" always;
        add_header Access-Control-Allow-Headers "Content-Type, Authorization" always;
        add_header Access-Control-Allow-Credentials "true" always;

        if ($request_method = OPTIONS) {
            add_header Content-Length 0;
            add_header Content-Type text/plain;
            return 204;
        }

        proxy_pass http://backend:3000;
    }
}

静态资源的 CORS

# 字体文件和 Web 字体
location ~* \.(eot|ttf|woff|woff2)$ {
    add_header Access-Control-Allow-Origin "*";
}

# 公共 CDN 资源
location /cdn/ {
    add_header Access-Control-Allow-Origin "*";
    root /var/www/public;
}

完整配置

map $http_origin $cors_origin {
    default "";
    "~^https?://(app\.example\.com|www\.example\.com)$" $http_origin;
    "~^https?://localhost:" $http_origin;
}

server {
    listen 80;
    server_name api.example.com;

    location / {
        # CORS 头
        add_header Access-Control-Allow-Origin $cors_origin always;
        add_header Access-Control-Allow-Methods "GET, POST, PUT, DELETE, PATCH, OPTIONS" always;
        add_header Access-Control-Allow-Headers "DNT, User-Agent, X-Requested-With, If-Modified-Since, Cache-Control, Content-Type, Range, Authorization" always;
        add_header Access-Control-Allow-Credentials "true" always;
        add_header Access-Control-Max-Age 86400 always;

        # 预检请求
        if ($request_method = OPTIONS) {
            return 204;
        }

        proxy_pass http://backend:3000;
    }
}

小结

CORS 通过响应头控制跨域访问权限，Nginx 统一处理可避免在每个后端应用中配置。
Access-Control-Allow-Origin "*" 允许所有来源（不携带凭证）。
携带 Cookie/Auth 头时，Allow-Origin 不能为 *，需指定具体域名。
非简单请求的 OPTIONS 预检请求需要单独处理，返回 204 无内容。
通过 map 指令实现多个域名的动态 CORS 来源。

上一节：gzip 压缩下一节：速率限制与访问控制