React中gRPC-Web经两层Nginx路由无返回，如何配置？

问题根源 #

添加前置Nginx后请求无法回传，核心原因是默认的根路径代理没有处理gRPC-Web所需的专属请求头、跨域响应头，以及路径转发规则不匹配，导致前端无法识别后端返回的gRPC-Web响应。

前置Nginx调整配置 #

需要针对gRPC-Web的请求路径单独配置代理规则，确保关键请求头和响应头正确传递：

# 专门处理gRPC-Web请求的路径
location /my.EndPoint/ {
    # 传递基础请求头给后端Nginx
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    
    # 强制传递gRPC-Web核心标识头
    proxy_set_header X-Grpc-Web $http_x_grpc_web;
    proxy_set_header Content-Type $http_content_type;

    # 透传后端返回的跨域相关响应头
    proxy_pass_header Access-Control-Allow-Origin;
    proxy_pass_header Access-Control-Allow-Methods;
    proxy_pass_header Access-Control-Allow-Headers;

    # 代理到后端Nginx的对应服务路径，注意末尾斜杠保持一致
    proxy_pass http://192.168.0.xxx:81/my.EndPoint/;
    client_max_body_size 5G;
}

# 其他非gRPC-Web请求走根路径代理（如果需要保留）
location / {
    proxy_pass http://192.168.0.xxx:81;
    client_max_body_size 5G;
}

后端Nginx配置优化 #

保留原有跨域配置的基础上，添加always参数确保所有响应都携带跨域头，并优化OPTIONS请求处理：

location /my.EndPoint/ {
    # 跨域头添加always参数，确保非2xx响应也能返回头
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
    add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Transfer-Encoding,Custom-Header-1,X-Accept-Content-Transfer-Encoding,X-Accept-Response-Streaming,X-User-Agent,X-Grpc-Web,content-type,snet-current-block-number,snet-free-call-user-id,snet-payment-channel-signature-bin,snet-payment-type,x-grpc-web' always;
    add_header 'Access-Control-Max-Age' 1728000 always;

    # OPTIONS预检请求直接返回204，无需转发到后端服务
    if ($request_method = OPTIONS) {
        add_header 'Content-Type' 'text/plain charset=UTF-8';
        add_header 'Content-Length' 0;
        return 204;
    }

    # 代理到Rust Tonic HTTP1服务器
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_pass http://hostname:50051/my.EndPoint/;

    # 透传gRPC-Web响应的Content-Type头
    proxy_pass_header Content-Type;
}

关键注意事项 #

• 两层Nginx必须都传递X-Grpc-Web请求头，这是gRPC-Web客户端和服务端识别请求类型的核心标识
• 路径转发时要保持前后端Nginx的路径后缀一致（比如都带/），避免Nginx自动拼接路径导致请求地址错误
• 查看Nginx错误日志（默认路径/var/log/nginx/error.log），排查是否有头截断、权限或连接超时问题
• 避免在两层Nginx重复添加跨域头，优先在后端Nginx配置并通过前置Nginx透传

内容的提问来源于stack exchange，提问作者Daniël van den Berg