---

title: Envoy gRPC-Web 代理与跨域配置实战

keywords:

• gRPC-Web
• Envoy
• CORS
• http_filters
• cluster

description: 使用 Envoy 将浏览器 gRPC-Web 请求代理到后端 gRPC 服务，配置 gRPC-Web 过滤器与 CORS。

categories:

• 文章资讯
• 技术教程

---

Envoy gRPC-Web 代理与跨域配置实战

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
                stat_prefix: ingress_http
                route_config:
                  name: local_route
                  virtual_hosts:
                    - name: backend
                      domains: ["*"]
                      routes:
                        - match: { prefix: "/" }
                          route: { cluster: grpc_back }
                http_filters:
                  - name: envoy.filters.http.grpc_web
                  - name: envoy.filters.http.cors
                  - name: envoy.filters.http.router
  clusters:
    - name: grpc_back
      type: LOGICAL_DNS
      connect_timeout: 1s
      lb_policy: ROUND_ROBIN
      http2_protocol_options: {}
      load_assignment:
        cluster_name: grpc_back
        endpoints:
          - lb_endpoints:
              - endpoint:
                  address:
                    socket_address: { address: 127.0.0.1, port_value: 7001 }

总结

通过 grpc_web 过滤器与 HTTP/2 后端集群配置，Envoy 可接受浏览器 gRPC-Web 并转发到 gRPC 服务。