一劳永逸解决Nginx跨域问题:最全面的CORS配置方案

在 Nginx 中配置允许跨域（CORS，Cross-Origin Resource Sharing）是通过在响应头中添加特定的 HTTP 头来实现的。以下是详细的配置方法和示例。

1. 什么是跨域？

跨域是指浏览器从一个域名的网页去请求另一个域名的资源。出于安全考虑，浏览器默认禁止跨域请求。通过配置 CORS，可以允许特定的域名或所有域名访问资源。

2. Nginx 配置允许跨域

全局配置

在 Nginx 配置文件中，可以通过添加以下配置来允许所有域名跨域访问：

server {
    listen 80;
    server_name example.com;

    location / {
        # 允许所有域名跨域
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';

        # 处理 OPTIONS 预检请求
        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Max-Age' 1728000;
            add_header 'Content-Type' 'text/plain; charset=utf-8';
            add_header 'Content-Length' 0;
            return 204;
        }

        # 其他配置
        proxy_pass http://backend;
    }
}

配置说明

• Access-Control-Allow-Origin：允许跨域的域名，* 表示允许所有域名。

• Access-Control-Allow-Methods：允许的 HTTP 方法（如 GET、POST 等）。

• Access-Control-Allow-Headers：允许的请求头。

• Access-Control-Expose-Headers：允许客户端访问的响应头。

• Access-Control-Max-Age：预检请求的缓存时间（单位：秒）。

• OPTIONS 请求：用于处理浏览器的预检请求（Preflight Request）。

允许特定域名跨域

如果只想允许特定域名跨域，可以将 Access-Control-Allow-Origin 设置为具体的域名：

add_header 'Access-Control-Allow-Origin' 'https://example.com';

允许多个域名跨域

Nginx 原生不支持直接配置多个域名，但可以通过变量和条件判断实现：

# 定义允许的域名
map $http_origin $cors_origin {
    default "";
    "~^https://example.com$" $http_origin;
    "~^https://another.com$" $http_origin;
}

server {
    listen 80;
    server_name example.com;

    location / {
        # 动态设置允许的域名
        add_header 'Access-Control-Allow-Origin' $cors_origin;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';

        # 处理 OPTIONS 预检请求
        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Max-Age' 1728000;
            add_header 'Content-Type' 'text/plain; charset=utf-8';
            add_header 'Content-Length' 0;
            return 204;
        }

        # 其他配置
        proxy_pass http://backend;
    }
}

配置静态文件的跨域

如果 Nginx 直接提供静态文件服务，可以在 location 块中添加跨域头：

server {
    listen 80;
    server_name example.com;

    location /static/ {
        # 允许跨域
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';

        # 处理 OPTIONS 预检请求
        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Max-Age' 1728000;
            add_header 'Content-Type' 'text/plain; charset=utf-8';
            add_header 'Content-Length' 0;
            return 204;
        }

        # 静态文件路径
        alias /path/to/static/files/;
    }
}

3. 测试跨域配置

配置完成后，重启 Nginx 并测试跨域是否生效：

sudo nginx -t  # 测试配置文件语法
sudo systemctl restart nginx  # 重启 Nginx

使用浏览器开发者工具或 curl 命令检查响应头：

curl -I https://example.com

确保响应头中包含 Access-Control-Allow-Origin 等相关字段。

4. 注意事项

1. 安全性：允许所有域名跨域（*）可能会带来安全风险，建议在生产环境中限制为特定的域名。

2. 缓存问题：如果配置了 Access-Control-Allow-Origin 为具体域名，确保客户端不会缓存错误的响应头。

3. OPTIONS 请求：对于复杂请求（如 Content-Type: application/json），浏览器会先发送 OPTIONS 预检请求，确保 Nginx 正确处理。

5. 总结

通过 Nginx 配置允许跨域，可以轻松解决前端应用访问跨域资源的问题。根据实际需求，可以选择允许所有域名、特定域名或多个域名跨域访问。配置时需注意安全性和缓存问题，确保跨域请求的稳定性和安全性。

链接：https://www.cnblogs.com/ydswin/p/18193923

                                                              （版权归原作者所有，侵删）

文末福利

即将步入2025年，不少小伙伴在考虑来年的工作方向。

仅目前来说，传统运维冲击年薪30W+的转型方向就是SRE&DevOps岗位。

······

 以上所有资料获取请扫码

识别上方二维码

备注：2024最新运维资料

100%免费领取

（是扫码领取，不是在公众号后台回复，别看错了哦）