GRPC_WEB_FETCH_FAILED grpc network_error ai_generated true

INTERNAL: grpc-web: Failed to fetch

ID: grpc/grpc-web-failed-to-fetch

Also available as: JSON · Markdown · 中文

90%Fix Rate

85%Confidence

1Evidence

2024-03-15First Seen

Version Compatibility

Version	Status	Introduced	Deprecated	Notes
grpc-web 1.4.2	active	—	—	—
envoy 1.28.0	active	—	—	—
grpc-go 1.62.0	active	—	—	—
protobuf 25.3	active	—	—	—

Root Cause

Browser CORS policy or network failure prevents gRPC-Web requests from reaching the Envoy proxy or gRPC server.

generic

中文

浏览器 CORS 策略或网络故障阻止 gRPC-Web 请求到达 Envoy 代理或 gRPC 服务器。

Official Documentation

https://github.com/grpc/grpc-web/blob/master/doc/cors.md

Workarounds

85% success Configure Envoy CORS filter to allow the origin, methods, and headers. Example Envoy config snippet: http_filters: - name: envoy.filters.http.cors typed_config: "@type": type.googleapis.com/envoy.extensions.filters.http.cors.v3.Cors allow_origin_string_match: - prefix: "https://myapp.example.com" allow_methods: "POST, OPTIONS" allow_headers: "content-type, x-grpc-web, x-user-agent" max_age: "86400" Then restart Envoy.
```
Configure Envoy CORS filter to allow the origin, methods, and headers. Example Envoy config snippet:
  http_filters:
  - name: envoy.filters.http.cors
    typed_config:
      "@type": type.googleapis.com/envoy.extensions.filters.http.cors.v3.Cors
      allow_origin_string_match:
      - prefix: "https://myapp.example.com"
      allow_methods: "POST, OPTIONS"
      allow_headers: "content-type, x-grpc-web, x-user-agent"
      max_age: "86400"
  Then restart Envoy.
```
95% success Ensure the gRPC-Web client uses the correct URL (e.g., http://localhost:8080 instead of https://localhost:8080 if TLS is not set up) and that the Envoy proxy is running and reachable. Verify with curl: curl -v http://localhost:8080/your.service/Method
```
Ensure the gRPC-Web client uses the correct URL (e.g., http://localhost:8080 instead of https://localhost:8080 if TLS is not set up) and that the Envoy proxy is running and reachable. Verify with curl: curl -v http://localhost:8080/your.service/Method
```

中文步骤

Configure Envoy CORS filter to allow the origin, methods, and headers. Example Envoy config snippet:
  http_filters:
  - name: envoy.filters.http.cors
    typed_config:
      "@type": type.googleapis.com/envoy.extensions.filters.http.cors.v3.Cors
      allow_origin_string_match:
      - prefix: "https://myapp.example.com"
      allow_methods: "POST, OPTIONS"
      allow_headers: "content-type, x-grpc-web, x-user-agent"
      max_age: "86400"
  Then restart Envoy.

Ensure the gRPC-Web client uses the correct URL (e.g., http://localhost:8080 instead of https://localhost:8080 if TLS is not set up) and that the Envoy proxy is running and reachable. Verify with curl: curl -v http://localhost:8080/your.service/Method

Dead Ends

Common approaches that don't work:

95% fail
Bypasses security but breaks in production and on other browsers; not a real fix.
90% fail
The error is not timeout-related; it's a pre-request fetch failure, so timeout changes have no effect.