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,比任何文档都可靠。










