Windows下Nginx跨域资源共享CORS配置实战教程-Nginx-PHP中文网

在 Windows 下用 Nginx 解决前端跨域问题，核心是通过反向代理在 location 块中配置 add_header 添加 Access-Control-Allow-Origin 等 CORS 头，并用 if ($request_method = 'OPTIONS') 处理预检请求返回 204；需确保 proxy_pass 正确、map 白名单动态设源、重载配置后验证响应头。

windows下nginx跨域资源共享cors配置实战教程

在 Windows 下用 Nginx 解决前端跨域问题，核心是正确配置 Access-Control-Allow-Origin 等响应头。不需要改前端代码、不依赖后端接口配合，Nginx 在反向代理层统一拦截并添加 CORS 头即可生效。

确认 Nginx 正在反向代理你的服务

跨域配置只在 Nginx 作为代理（而非静态文件服务器）时才有意义。例如你前端访问 http://localhost:8080，实际请求被 Nginx 转发到 https://www.php.cn/link/307527f309aa633edcc5f228a5533f25api，这时所有响应都可由 Nginx 注入 CORS 头。

检查 nginx.conf 或 sites-enabled/xxx.conf 中是否有 proxy_pass 指令
确保请求路径匹配了带 location 的代理块（如 location /api/ { proxy_pass https://www.php.cn/link/307527f309aa633edcc5f228a5533f25; }）
避免把 CORS 配置写在 location / {} 这类根路径下——它可能干扰静态资源或健康检查接口

添加标准 CORS 响应头（支持单源 & 凭据）

在对应 location 块内加入以下配置，适用于开发环境或明确知道前端域名的场景：

location /api/ {
    proxy_pass https://www.php.cn/link/307527f309aa633edcc5f228a5533f25;
<pre class="brush:php;toolbar:false;"># 允许指定源（替换为你的真实前端地址）
add_header 'Access-Control-Allow-Origin' 'http://localhost:8080';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization';

# 处理预检请求（OPTIONS）
if ($request_method = 'OPTIONS') {
    add_header 'Access-Control-Allow-Origin' 'http://localhost:8080';
    add_header 'Access-Control-Allow-Credentials' 'true';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';
    add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization';
    add_header 'Access-Control-Max-Age' 1728000;
    add_header 'Content-Type' 'text/plain; charset=utf-8';
    add_header 'Content-Length' 0;
    return 204;
}

}

Access-Control-Allow-Origin 不能设为 * 同时启用 credentials，否则浏览器会拒绝
if ($request_method = 'OPTIONS') 是必须的——浏览器对带凭据或自定义头的请求会先发预检，Nginx 需直接返回 204，不转发给后端
所有 add_header 指令在 if 块内外都要重复写，因为 if 是独立作用域

支持多源或动态源（谨慎使用）

若前端部署多个域名（如 dev.example.com、staging.example.com），或需适配本地不同端口调试，可用变量+白名单方式动态设置 Origin：

map $http_origin $cors_origin {
    default "";
    "~^http://localhost:8080$" "$http_origin";
    "~^https://dev\.example\.com$" "$http_origin";
    "~^https://staging\.example\.com$" "$http_origin";
}
<p>server {
listen 80;
location /api/ {
proxy_pass <a href="https://www.php.cn/link/307527f309aa633edcc5f228a5533f25">https://www.php.cn/link/307527f309aa633edcc5f228a5533f25</a>;</p><pre class="brush:php;toolbar:false;">    add_header 'Access-Control-Allow-Origin' $cors_origin;
    add_header 'Access-Control-Allow-Credentials' 'true';
    # 其他头保持不变...

    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' $cors_origin;
        add_header 'Access-Control-Allow-Credentials' 'true';
        # ...其余同上
        return 204;
    }
}

}

map 必须写在 http 块顶层，不能放在 server 或 location 内
正则匹配注意转义点号 \. 和锚定 ^、$，防止恶意源伪造
若 $cors_origin 为空（即未命中白名单），Nginx 不会添加 Access-Control-Allow-Origin，浏览器自然拒绝跨域，安全可控