基于Golang的gRPC-Web实践_前端直接调用gRPC服务指南

grpc-web 不能直接用 grpc.dial 连后端，因浏览器仅支持 http/1.1 + protobuf 封装，不支持原生 grpc/http/2 明文；必须经 envoy 等代理转换，前端调用地址应为 envoy 暴露的 http/1.1 端点（如 http://localhost:8080），路径需含完整服务名（如 /userservice/login），且 go 后端需启用 h2c 或 tls，envoy 上游配置须禁用 tls 握手。

gRPC-Web 为什么不能直接用 grpc.Dial 连后端？

因为浏览器不支持 HTTP/2 明文（h2c）和 gRPC 原生协议，grpc.Dial 是 Go 后端内部直连用的，前端发请求走的是 HTTP/1.1 + protobuf 编码的特殊封装。硬套会直接报 net/http: HTTP/1.x transport connection broken 或空响应。

必须经过一层转换：要么用 Envoy / nginx-http-grpc-web 做反向代理，要么用 grpcwebproxy（已归档，不推荐），现在主流是 Envoy —— 它能把浏览器发来的 application/grpc-web+proto 请求，转成标准 gRPC 调用发给 Go 后端。

• Envoy 配置里必须开启 grpc_services 并指定上游为 http://localhost:9090（你的 Go gRPC server 地址）
• 前端 js 必须用 @improbable-eng/grpc-web 或 connect-web，不能用 @grpc/grpc-js
• Go 后端无需改代码，但得暴露 HTTP/2 端口（比如 :9090），且监听时用 grpc.Creds(credentials.NewTLS(...)) 或明确允许 h2c（仅开发）

前端用 connect-web 调用时，URL 怎么填才不 404？

不是填 Go 后端 gRPC server 的地址，而是填 Envoy（或代理层）暴露的 Web 端点，比如 http://localhost:8080。这个地址必须和 Envoy 的 virtual_hosts[0].domains 匹配，且路径要带服务全名 —— 比如你的 proto 定义了 service UserService，方法 Login，那前端调用路径其实是 /UserService/Login，由 Envoy 自动映射。

• 如果填错成 http://localhost:9090（后端端口），会直接跨域失败或连接被拒绝
• 如果路径少写了 service 名（比如只写 /Login），Envoy 返回 404，日志里有 no cluster match for URL
• 开发时建议在 Envoy 配置里加 access_log_path: /dev/stdout，一眼看到转发是否命中

Go 后端启用 h2c（HTTP/2 without TLS）开发时，为什么客户端连不上？

因为现代浏览器强制要求 https 下才能发 gRPC-Web 请求，但本地开发常想跳过证书。这时你得让 Envoy 和 Go 后端都配合：Envoy 作为入口支持 HTTP/1.1，再以 h2c 协议去连 Go 后端；而 Go 后端必须显式启用 h2c，否则 grpc.NewServer() 默认只认 TLS。

立即学习“go语言免费学习笔记（深入）”；

• Go 侧启动 server 时加 grpc.Creds(credentials.NewTLS(nil)) 不行 —— 这会 panic，得用 grpc.WithTransportCredentials(insecure.NewCredentials())
• Envoy upstream 的 cluster 配置里，transport_socket 必须设为 name: envoy.transport_sockets.raw_buffer，否则它默认尝试 TLS 握手
• chrome 控制台若报 ERR_HTTP2_INADEQUATE_TRANSPORT_SECURITY，说明浏览器在尝试直连后端，没走 Envoy，检查前端 client 构造时传的 endpoint 是否正确

connect-web 的 createConnectTransport 和 createGrpcWebTransport 有什么实质区别？

前者是 Connect 协议（基于 json/protobuf 的新标准），后者是老式 gRPC-Web 协议（只支持 protobuf 编码）。Go 后端默认不兼容 Connect，除非你用 connect-go 替换原生 gRPC-Go；而 grpcwebproxy 根本不支持 Connect。

• 如果你后端是原生 gRPC-Go + Envoy，必须用 createGrpcWebTransport，否则返回 415 Unsupported Media Type
• createConnectTransport 发的是 application/connect+json，需要后端有 connect-go 的 connect.NewServeMux() 注册 handler
• 二者生成的 URL 路径不同：grpc-web 是 /Package.Service/Method，connect 是 /package.service.v1.Service/Method（注意小写和版本）

真正上线前务必确认前后端协议对齐，混用只会卡在预检请求或空响应上。Envoy 日志、浏览器 Network 面板里的 Request Headers 和 Response Status，比任何文档都可靠。