React应用经Nginx代理遭CORS策略拦截问题求助

问题背景 #

开发PoC时遇到CORS问题：后端API部署在Nginx代理后，通过代理访问时浏览器触发CORS错误，但直接访问API实际端点无异常。需在Nginx层面修复，而非修改React应用配置，尝试多数论坛方案未解决。

环境信息 #

• React应用运行端口：3000
• Nginx运行端口：80

原Nginx Default.conf配置 #

server {
    listen 80;
    server_name  localhost;
    resolver 127.0.0.11 valid=1s ipv6=off;

    location /products/ {
    
                add_header "Access-Control-Allow-Origin" "*";
                add_header "Access-Control-Allow-Headers" "Origin, X-Requested-With, Content-Type, Accept";
                add_header 'Access-Control-Allow-Credentials' 'true';
            if ($request_method = 'OPTIONS') {
               return 204;   
            }   proxy_set_header Host $host;
                access_by_lua_file /usr/local/openresty/lualib/auth.lua;
                proxy_pass http://items-ms:9212/;
                proxy_http_version 1.1;
                proxy_set_header Connection "";
                #  proxy_set_header X-Forwarded-For $remote_addr;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-Server $http_host;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header  X-Forwarded-Proto $scheme;
        }
        location / {
            add_header "Access-Control-Allow-Origin" "*";
            add_header "Access-Control-Allow-Headers" "Origin, X-Requested-With, Content-Type, Accept";
            add_header 'Access-Control-Allow-Credentials' 'true';
            if ($request_method = 'OPTIONS') {
               return 204;   
            }
            root /usr/share/nginx/html;
            try_files $uri /index.html;
        }
}

报错信息 #

Access to XMLHttpRequest at 'http://localhost/products' from origin 'http://localhost:3000' has been blocked by CORS policy: Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response

修复方案 #

1. 补充缺失的Authorization请求头权限 #

报错核心原因是请求携带的Authorization头未被加入Access-Control-Allow-Headers列表，需在配置中添加该字段。

2. 解决跨域凭证与通配符源的冲突 #

当设置Access-Control-Allow-Credentials: true时，Access-Control-Allow-Origin不能使用*，必须指定具体的前端源（如http://localhost:3000），否则浏览器会拒绝接受响应。

3. 确保跨域头在所有响应中生效 #

Nginx默认仅在状态码为200/201/204等成功类响应中添加add_header，需加上always参数，保证OPTIONS预请求（返回204）也能携带跨域头。

修改后的完整Nginx配置 #

server {
    listen 80;
    server_name  localhost;
    resolver 127.0.0.11 valid=1s ipv6=off;

    # 全局定义跨域变量，避免重复配置
    set $cors_allowed_origin "http://localhost:3000";
    set $cors_allowed_headers "Origin, X-Requested-With, Content-Type, Accept, Authorization";
    set $cors_allow_credentials "true";

    location /products/ {
        # 确保跨域头在所有响应中生效
        add_header Access-Control-Allow-Origin $cors_allowed_origin always;
        add_header Access-Control-Allow-Headers $cors_allowed_headers always;
        add_header Access-Control-Allow-Credentials $cors_allow_credentials always;

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

        proxy_set_header Host $host;
        access_by_lua_file /usr/local/openresty/lualib/auth.lua;
        proxy_pass http://items-ms:9212/;
        proxy_http_version 1.1;
        proxy_set_header Connection "";
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-Server $http_host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    location / {
        add_header Access-Control-Allow-Origin $cors_allowed_origin always;
        add_header Access-Control-Allow-Headers $cors_allowed_headers always;
        add_header Access-Control-Allow-Credentials $cors_allow_credentials always;

        if ($request_method = 'OPTIONS') {
            return 204;
        }

        root /usr/share/nginx/html;
        try_files $uri /index.html;
    }
}

后续操作 #

• 修改配置后重启Nginx：nginx -s reload
• 若需支持多个前端源，可通过Nginx变量判断请求的Origin头是否在允许列表中，动态赋值$cors_allowed_origin

内容的提问来源于stack exchange，提问作者monk_7