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服务，实现高效双向通信的渐进集成。