#码力全开·技术π对#在使用 gRPC-Web 从浏览器访问 gRPC 服务时，如何配置 Envoy Proxy 作为中间层

在使用 gRPC-Web 从浏览器访问后端 gRPC 服务时，Envoy Proxy 是一个常用的中间层代理方案，负责将浏览器发出的 HTTP/JSON 请求转换为标准的 gRPC 协议与后端通信。gRPC-Web 客户端在发送请求时会以 JSON 格式编码，并通过 HTTP POST 提交到 Envoy，后者解析后将其转换为 gRPC 消息转发给后端服务。

配置 Envoy 作为中间层的关键在于设置 ​​typed_config​​​ 中的 ​​GrpcWeb​​ HTTP 过滤器，并确保路由配置指向正确的 gRPC 后端：

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.router

routes:
  - match:
      prefix: "/your.service.name"
    route:
      cluster: your_grpc_backend
      max_grpc_timeout: 20s

同时，gRPC-Web 客户端需指定 ​​host​​​ 和 ​​transport​​​，并正确设置 ​​ServiceName​​ 以匹配后端接口定义：

const client = new YourServiceClient("https://envoy-proxy-endpoint", null, null);

该

机制允许前端开发者在不暴露 gRPC 端口的前提下，安全地调用后端服务，并利用 Envoy 实现协议转换、鉴权、限流等附加功能，提升整体架构的安全性与灵活性。

gRPC-Web 的 HTTP/JSON 到 gRPC 转换机制是：客户端（浏览器）发送符合 gRPC-Web 规范的 HTTP 请求（如 POST），请求体包含 JSON 格式的 gRPC 消息，同时携带 ​​content-type: application/grpc-web+proto​​ 头部；Envoy Proxy 作为中间层接收该请求，将 HTTP/JSON 转换为 HTTP/2 + Protobuf 格式的原生 gRPC 请求发往后端 gRPC 服务，再将服务响应的 Protobuf 消息转换为 JSON 返回给客户端，实现浏览器与 gRPC 服务的通信。