Nginx反向代理跨域配置运维实战解析

发布人：发布时间：10小时前阅读量：4

跨域问题与反向代理的适配场景

在前后端分离架构中，浏览器同源策略会阻止不同域名的资源相互访问。常见的解决方案包括JSONP、CORS头部配置以及反向代理。其中，Nginx反向代理因其对后端透明、无需修改应用代码、易于运维部署等优势，成为IDC运维中处理跨域的主流选择。

基础配置：添加CORS响应头

在Nginx的location块中，通过add_header指令注入跨域所需的HTTP头部。以下为典型配置示例：

Access-Control-Allow-Origin：指定允许的源，生产环境建议写明确的具体域名而非通配符*。
Access-Control-Allow-Methods：列出允许的HTTP方法，如GET, POST, OPTIONS。
Access-Control-Allow-Headers：允许自定义请求头，例如Content-Type, Authorization。
Access-Control-Max-Age：预检请求的缓存时间，减少不必要的OPTIONS请求。

示例片段：

location /api/ {
    add_header Access-Control-Allow-Origin $http_origin;
    add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
    add_header Access-Control-Allow-Headers 'Content-Type, Authorization';
    add_header Access-Control-Allow-Credentials true;
    if ($request_method = 'OPTIONS') {
        return 204;
    }
    proxy_pass http://backend_server;
}

预检请求（OPTIONS）处理

当客户端发送非简单请求（如带自定义头部或JSON格式）时，浏览器会先发起OPTIONS预检。运维中务必在Nginx层直接返回204状态码并添加CORS头，避免请求转发到后端增加延迟。上述配置中的if判断即用于此目的。

运维落地注意事项

动态Origin处理：使用$http_origin变量可动态返回请求源，但需配合map指令做白名单校验，防止任意域跨域。
安全加固：避免使用Access-Control-Allow-Origin: *同时携带withCredentials: true，浏览器会拒绝此类组合。
性能优化：合理设置Access-Control-Max-Age（如600秒），减少OPTIONS请求频率；同时可开启Nginx的proxy_cache为OPTIONS响应做缓存。
日志监控：在log_format中加入$http_origin和$request_method，便于排查跨域相关错误。

案例分析：多环境部署适配

某电商平台在测试、预发布、生产三个环境中使用不同域名，通过Nginx的map指令对Origin进行白名单匹配：

map $http_origin $allowed_origin {
    ~*https?:\/\/(test|staging|www)\.example\.com$ $http_origin;
    default '';
}
server {
    add_header Access-Control-Allow-Origin $allowed_origin;
    ...
}

该方案保证了仅允许内部域名跨域，杜绝了外部恶意站点的请求。