React-native集成gRPC-web遇400/500错误，求配置排查

我正尝试在React Native项目中集成gRPC-web，使用监听8080端口的Envoy代理请求至运行在4000端口的Node服务器，但收到错误提示“Http response at 400 or 500 level”。该Envoy.yaml配置在另一个React项目中可正常运行，请问我的配置存在什么问题？恳请帮忙排查。

Envoy配置文件（envoy.yaml） #

static_resources:
  listeners:
    - name: listener_0
      address:
        socket_address: { address: 0.0.0.0, port_value: 8080 }
      filter_chains:
        - filters:
            - name: envoy.filters.network.http_connection_manager
              typed_config:
                '@type': type.googleapis.com/envoy.extensions.filters.network.http_connection_manager.v3.HttpConnectionManager
                codec_type: auto
                stat_prefix: ingress_http
                route_config:
                  name: local_route
                  virtual_hosts:
                    - name: local_service
                      domains: ['*']
                      routes:
                        - match: { prefix: '/' }
                          route:
                            cluster: piement_service
                            timeout: 0s
                            max_stream_duration:
                              grpc_timeout_header_max: 0s
                      cors:
                        allow_origin_string_match:
                          - prefix: '*'
                        allow_methods: GET, PUT, DELETE, POST, OPTIONS
                        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
                        max_age: '1728000'
                        expose_headers: custom-header-1,grpc-status,grpc-message
                http_filters:
                  - name: envoy.filters.http.grpc_web
                    typed_config:
                      '@type': type.googleapis.com/envoy.extensions.filters.http.grpc_web.v3.GrpcWeb
                  - name: envoy.filters.http.cors
                    typed_config:
                      '@type': type.googleapis.com/envoy.extensions.filters.http.cors.v3.Cors
                  - name: envoy.filters.http.router
                    typed_config:
                      '@type': type.googleapis.com/envoy.extensions.filters.http.router.v3.Router
  clusters:
    - name: piement_service
      connect_timeout: 0.25s
      type: logical_dns
      http2_protocol_options: {}
      lb_policy: round_robin
      load_assignment:
        cluster_name: piement_service
        endpoints:
          - lb_endpoints:
              - endpoint:
                  address:
                    socket_address:
                      address: 0.0.0.0
                      port_value: 4000

Node服务器代码（server.js） #

const path = require("path");
require("dotenv").config({
  path: path.resolve(__dirname, ".env"),
});
const express = require("express");
const app = express();
const port = 4000;

const { signIn, signUp, forgetPassword } = require("./controller/authHandler");

const grpc = require("grpc");
const protoLoader = require("@grpc/proto-loader");

app.use(express.static("public"));
app.use(express.json());

const AUTH_PROTO_PATH = __dirname + "/proto/auth.proto";

const SERVER_URI = "0.0.0.0:8080";

const packageDefinition = protoLoader.loadSync(AUTH_PROTO_PATH);
const protoDescriptor = grpc.loadPackageDefinition(packageDefinition);

const server = new grpc.Server();

server.addService(protoDescriptor.AuthService.service, {
  signIn,
  signUp,
  forgetPassword,
});

server.bind(SERVER_URI, grpc.ServerCredentials.createInsecure());
console.log(server);
server.start();

app.listen(port, () => console.log(`Node server listening on port ${port}!`));

问题根源与修复方案 #

问题核心 #

你的gRPC服务端口绑定与Envoy配置不匹配：

• Envoy配置中，piement_service集群指向4000端口，期望gRPC服务运行在此端口
• 但server.js中，你将gRPC服务器绑定到了0.0.0.0:8080，这个端口已经被Envoy占用，会导致gRPC服务启动失败；同时4000端口只有普通Express服务，无法处理gRPC请求，因此Envoy转发请求时返回4xx/5xx错误。

修复步骤 #

1. 修改server.js中的gRPC服务绑定端口，与Envoy配置的集群端口保持一致：

// 原代码
const SERVER_URI = "0.0.0.0:8080";

// 修改为
const SERVER_URI = "0.0.0.0:4000";

2. 调整启动顺序：先启动Node服务器（确保gRPC服务在4000端口正常运行），再启动Envoy代理，避免端口冲突。
3. React Native端注意事项：真机或模拟器环境下，请求地址需使用主机的局域网IP（如http://192.168.x.x:8080），而非localhost。

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