grpc config_error ai_generated true

INTERNAL: grpc-web: CORS preflight failed for origin http://example.com: allowed origins: [http://localhost:3000]

ID: grpc/grpc-web-cors-origin-mismatch

Also available as: JSON · Markdown · 中文
92%Fix Rate
84%Confidence
1Evidence
2024-07-22First Seen

Version Compatibility

VersionStatusIntroducedDeprecatedNotes
gRPC-Web v1.4.0 active — — —
Envoy 1.27.0 active — — —
gRPC v1.60.0 active — — —

Root Cause

The gRPC-Web proxy's CORS configuration does not include the requesting origin, causing the browser to block the preflight request and preventing the gRPC call from proceeding.

generic

中文

gRPC-Web 代理的 CORS 配置未包含请求来源，导致浏览器阻止预检请求并阻止 gRPC 调用继续进行。

Official Documentation

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

Workarounds

  1. 90% success Update the Envoy or gRPC-Web proxy configuration to include the requesting origin: in Envoy, add `allowed_origins: ["http://example.com"]` to the CORS filter. 
    Update the Envoy or gRPC-Web proxy configuration to include the requesting origin: in Envoy, add `allowed_origins: ["http://example.com"]` to the CORS filter.
  2. 85% success Use a reverse proxy like Nginx to handle CORS headers: `add_header Access-Control-Allow-Origin "http://example.com" always;` 
    Use a reverse proxy like Nginx to handle CORS headers: `add_header Access-Control-Allow-Origin "http://example.com" always;`
  3. 75% success Temporarily enable a wildcard origin for development: in Envoy config, set `allowed_origins: ["*"]` but revert for production. 
    Temporarily enable a wildcard origin for development: in Envoy config, set `allowed_origins: ["*"]` but revert for production.

中文步骤

  1. 更新 Envoy 或 gRPC-Web 代理配置以包含请求来源：在 Envoy 中，将 `allowed_origins: ["http://example.com"]` 添加到 CORS 过滤器。
  2. 使用反向代理（如 Nginx）处理 CORS 标头：`add_header Access-Control-Allow-Origin "http://example.com" always;`
  3. 临时启用通配符来源用于开发：在 Envoy 配置中设置 `allowed_origins: ["*"]`，但生产环境需恢复。

Dead Ends

Common approaches that don't work:

  1. 90% fail

    Disabling CORS entirely in the browser (e.g., using a flag) is insecure and not a production solution.

  2. 80% fail

    Changing the client origin in the browser's developer tools does not persist and is not a real fix.

  3. 60% fail

    Adding a wildcard '*' to allowed origins may work but exposes the service to any origin, creating security risks.