gRPC-Web跨域与代理网关实践

概述目标：在浏览器中通过gRPC-Web访问后端gRPC服务，配置代理层与CORS头，兼容HTTP/1.1与跨域限制。适用：前端调用后端gRPC、混合HTTP/gRPC服务。核心与实战Envoy gRPC-Web过滤器与CORS：http_filters:

- name: envoy.filters.http.grpc_web

- name: envoy.filters.http.cors

- name: envoy.filters.http.router

route_config:

name: local_route

virtual_hosts:

- name: web

domains: ["*"]

routes:

- match: { prefix: "/" }

route:

cluster: grpc_service

timeout: 3s

upgrade_configs: [{ upgrade_type: "websocket" }]

cors:

allow_origin_string_match: [{ prefix: "https://app.example.com" }]

allow_methods: "POST, OPTIONS"

allow_headers: "content-type,x-grpc-web"

expose_headers: "grpc-status,grpc-message"

max_age: "1800"

Cluster到gRPC服务：clusters:

- name: grpc_service

type: STRICT_DNS

http2_protocol_options: {}

load_assignment: { ... }

示例浏览器请求头：Content-Type: application/grpc-web+proto

X-Grpc-Web: 1

预检OPTIONS：Access-Control-Request-Method: POST

Access-Control-Request-Headers: content-type,x-grpc-web

Origin: https://app.example.com

验证与监控代理层：检查Envoy日志与`grpc_web`过滤器命中；验证CORS预检响应头。后端服务：确认HTTP/2与gRPC服务正常；观察响应`grpc-status`与`grpc-message`。浏览器：开发者工具查看Network与CORS；确保请求头与响应头匹配。常见误区未启用`grpc_web`过滤器导致浏览器请求无法转换；必须在代理层开启。CORS头不完整导致预检失败；需覆盖`content-type`与`x-grpc-web`等头。后端未使用HTTP/2；gRPC服务必须启用HTTP/2。结语通过Envoy代理与正确的CORS配置，gRPC-Web可在浏览器环境稳定访问后端gRPC服务，实现高效双向通信的渐进集成。