无法将Nginx配置为HTTPS+gRPC-Web本地代理的问题排查

我尝试将浏览器端gRPC-Web客户端连接到Node.js的@grpc/grpc-js服务器，已配置本地证书，通过HTTPS别名主机https://sferadel.local提供Web服务，项目使用Nix devshell运行。目前遇到Nginx解析请求错误，请求排查配置问题。

Nginx配置 #

start-nginx.exec = let
  nginxConf = pkgs.writeText "nginx.conf" ''
    user root root;
    pid ${DEVENV_STATE}/nginx/nginx.pid;
    error_log ${DEVENV_STATE}/nginx/error.log debug;
    daemon off;
    events {
    }
    http {
      access_log ${DEVENV_STATE}/nginx/access.log;
      client_body_temp_path ${DEVENV_STATE}/nginx/;
      proxy_temp_path ${DEVENV_STATE}/nginx/;
      fastcgi_temp_path ${DEVENV_STATE}/nginx/;
      scgi_temp_path ${DEVENV_STATE}/nginx/;
      uwsgi_temp_path ${DEVENV_STATE}/nginx/;
      server {
        server_name sferadel.local;
        listen 3001;
        listen 443 ssl;
        #listen 443 quic reuseport;
        http2 on;
        ssl_certificate ${DEVENV_STATE}/mkcert/sferadel.local+1.pem;
        ssl_certificate_key ${DEVENV_STATE}/mkcert/sferadel.local+1-key.pem;

        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';
        add_header 'Access-Control-Allow-Headers' 'keep-alive,user-agent,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,grpc-timeout';
        if ($request_method != 'POST') {
          return 404;
        }
        location / {
          grpc_socket_keepalive on;
          grpc_intercept_errors on;
          grpc_set_header X-Real-IP $remote_addr;
          grpc_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
          grpc_pass grpc://localhost:3002;
        }
      }
    }
  '';
in "sudo ${pkgs.nginxQuic}/bin/nginx -c ${nginxConf}";

gRPC服务器代码 #

const server = new grpc.Server({
   // "grpc.enable_http_proxy": 1,
   // "grpc.ssl_target_name_override": "sferadel.local",
   // "grpc-node.tls_enable_trace": 1,
})
server.addService(...adaptService(EchoService, new Echo()))
server.bindAsync(
   "0.0.0.0:3002",
   grpc.ServerCredentials.createSsl(
      fs.readFileSync("./.devenv/state/mkcert/rootCA.pem"),
      [
         {
            cert_chain: fs.readFileSync("./.devenv/state/mkcert/sferadel.local+1.pem"),
            private_key: fs.readFileSync("./.devenv/state/mkcert/sferadel.local+1-key.pem")
         }
      ],
      true
   ),
   (err, port) => {
      console.log(`Server bound on port: ${port}`)
      server.start()
   }
)

客户端代码 #

const transport = new GrpcWebFetchTransport({ baseUrl: "https://sferadel.local:3001", format: "binary" })
new EchoServiceClient(transport).echo({ message: "Hello echo!" })

错误日志 #

2023/10/24 19:28:29 [info] 966188#966188: *7 client sent invalid method while reading client request line, client: 127.0.0.1, server: sferadel.local, request: "

问题原因与修复方案 #

核心问题

1. Nginx与gRPC服务器协议不匹配：你的gRPC服务器启用了SSL加密，但Nginx用明文grpc://协议连接，导致握手失败，请求解析出错。
2. gRPC-Web请求无法被直接转发：Nginx默认grpc_pass仅支持标准gRPC（HTTP/2）流量，不兼容gRPC-Web的HTTP/1.1请求格式。
3. 跨域预检请求被拦截：配置中的if ($request_method != 'POST') { return 404; }会阻断OPTIONS预检请求，导致跨域失败。

具体修复步骤

1. 修正Nginx与gRPC服务器的连接方式

有两种选择：

• 方案A：gRPC服务器改用明文（推荐，因为Nginx已处理客户端HTTPS）
  修改服务器绑定代码，使用明文凭证：

  server.bindAsync(
    "0.0.0.0:3002",
    grpc.ServerCredentials.createInsecure(), // 替换为明文凭证
    (err, port) => {
      console.log(`Server bound on port: ${port}`)
      server.start()
    }
  )
  

  此时Nginx的grpc_pass grpc://localhost:3002配置保持不变即可。

• 方案B：Nginx用加密协议连接服务器
  如果坚持服务器加密，修改Nginx的location配置，使用grpcs://并指定CA证书：

  location / {
    grpc_socket_keepalive on;
    grpc_intercept_errors on;
    grpc_set_header X-Real-IP $remote_addr;
    grpc_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    grpc_pass grpcs://localhost:3002; # 改用加密gRPC协议
    # 配置CA证书验证服务器身份
    grpc_ssl_trusted_certificate ${DEVENV_STATE}/mkcert/rootCA.pem;
    grpc_ssl_verify on;
    grpc_ssl_verify_depth 1;
  }
  

2. 启用gRPC-Web请求转换

Nginx需要grpc_web模块（第三方模块或Nginx Plus内置）来将gRPC-Web请求转换为标准gRPC请求。在location中添加配置：

location / {
  grpc_web on; # 启用gRPC-Web转换
  grpc_pass grpc://localhost:3002; # 对应方案A的明文连接
  # 保留跨域Header配置
  add_header 'Access-Control-Allow-Origin' '*';
  add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';
  add_header 'Access-Control-Allow-Headers' 'keep-alive,user-agent,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,grpc-timeout';
}

如果你的Nix环境没有这个模块，可改用Envoy作为专门的gRPC-Web代理，或切换客户端使用text格式（兼容性差，不推荐）。

3. 修复跨域预检拦截

移除原有的非POST请求拦截逻辑，替换为OPTIONS请求的专门处理：

# 处理跨域预检OPTIONS请求
if ($request_method = OPTIONS) {
  add_header 'Access-Control-Allow-Origin' '*';
  add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';
  add_header 'Access-Control-Allow-Headers' 'keep-alive,user-agent,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,grpc-timeout';
  return 204;
}
# 移除原来的 if ($request_method != 'POST') { return 404; }

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