React Native 中的 grpc-web 无法连接到 Envoy 代理服务器

Question

我在 AWS 中使用 Elastic Beanstalk 部署了一个远程 Envoy 代理（用于测试），配置如下：

admin:
  access_log_path: /tmp/admin_access.log
  address:
    socket_address: { address: 0.0.0.0, port_value: 9901 }

static_resources:
  listeners:
    - name: listener_0
      address:
        socket_address: { address: 0.0.0.0, port_value: 80 }
      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: grpc_cluster
                            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,accept,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: grpc_cluster
      connect_timeout: 0.25s
      type: logical_dns
      http2_protocol_options: {}
      lb_policy: round_robin
      load_assignment:
        cluster_name: grpc_cluster
        endpoints:
          - lb_endpoints:
              - endpoint:
                  address:
                    socket_address:
                      address: ${server_url}
                      port_value: ${server_port}

当我使用

grpcurl

甚至通过 Nodejs 的简单客户端测试与它的连接时：

import { LightStreamerClient } from "../protos-dist/LightstreamerServiceClientPb";
import { Empty, ServerInfo } from "../protos-dist/lightstreamer_pb";
import { RpcError } from "grpc-web";

const XMLHttpRequest = require("xhr2");

const client = new LightStreamerClient("http://mytest.us-west-1.elasticbeanstalk.com");

globalThis.XMLHttpRequest = XMLHttpRequest;

function getServerInfo(): Promise<[RpcError, ServerInfo]> {
  return new Promise((res) => {
    client.getServerInfo(new Empty(), null, (_err, response) => {
      res([_err, response]);
    });
  });
}

async function main() {
  console.log("Testing envoy server...");
  const [err, response] = await getServerInfo();
  console.log({ err, response });
  console.log("Done.");
}

main();

它按预期返回数据。

当我尝试从模拟的 React Native ios 应用程序内部运行相同的

grpc-web

调用时，对服务器的调用失败并出现错误：

[RpcError: Http response at 400 or 500 level, http status code: 0]

有趣的是，当我在本地运行相同的 envoy 代理时，它在所有测试机制下都能正常工作。想知道这是否与 CORS 有关？

Answer 1

我们确定 iOS 阻止了 http 上的不安全流量，因此我们在 React Native 应用程序的 Info.plist 中做了一个临时例外，并允许我们的 Envoy 不安全。