Getting started with the GrpcWeb middleware

Traefik Traefik v3 (beta)
1

I'm learning about gRPC-Web and saw Traefik recently added GrpcWeb Middleware.

I've attempted to make a minimal project trying it out using a combination of Traefik and protobuf-ts here:

However I can't seem to get it to work.

Traefik says:

500 Internal Server Error error="stream error: stream ID 3; PROTOCOL_ERROR; received from peer"

and the frontend (browser) says:

Access to fetch at 'http://mooncar.docker.localhost/helloworld.Greeter/SayHello' from origin 'http://localhost:5173' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
grpc-web-transport.js:123          POST http://mooncar.docker.localhost/helloworld.Greeter/SayHello net::ERR_FAILED
helloworld.ts:18 RpcError: Failed to fetch
    at grpc-web-transport.js:183:25

The docker-compose file looks like this:

version: '3'

services:
  reverse-proxy:
    image: traefik:v3.0.0-beta2
    command: --api.insecure=true --providers.docker --log.level=DEBUG
    ports:
      - "80:80"
      - "8080:8080" # The Web UI (enabled by --api.insecure=true)
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock

  mooncar:
    build:
      context: .
      dockerfile: docker/backend.dockerfile
    ports:
      - "50051:50051"
    labels:
      - "traefik.enable=true"
      - "traefik.http.routers.mooncar.rule=Host(`mooncar.docker.localhost`)"
      - "traefik.http.services.mooncar.loadbalancer.server.scheme=h2c"
      - "traefik.http.middlewares.mooncar.grpcweb.allowOrigins=*"

The gRPC server works fine through traefik, but when I try with the grpc-web-transport it seems to hit a blocker and I'm not sure how to verify the grpc-web middleware works as expected.

Any one have some thoughts on how to go about this?

Thanks!

2

After spending a little time digging into how the middleware works in Traefik I discovered it's using this under the hood: github.com/improbable-eng/grpc-web

So I downloaded the prebuilt grpcweb proxy, and ran it.

docker compose up mooncar
grpcweb --backend_addr=localhost:50051 --allow_all_origins --run_tls_server=false

This worked without any problems. The browser responds and everything is fine.

So now I'm wondering why it isn't working through Traefik :thinking:

Tinkering continues...

3

It seems that the browser is doing an OPTIONS call that isn't being handled with CORS by Traefik. I'm not sure why or how to fix this.
My conclusion to this is running the grpcweb proxy in front of my gRPC server instead of using the Traefik grpcweb middleware.

4

After building traefik locally I discovered the GrpcWeb middleware never gets loaded.

if I add this:

	// GrpcWeb
	fmt.Println(config.GrpcWeb)
	if config.GrpcWeb != nil {

it prints out <nil>

I've reported it as a bug to issue #9607

5

Okay I figured it out, the config is supposed to look like this:

    labels:
      - "traefik.enable=true"
      - "traefik.http.routers.mooncar.rule=Host(`mooncar.docker.localhost`)"
      - "traefik.http.services.mooncar.loadbalancer.server.scheme=h2c"
      - "traefik.http.middlewares.mooncar-grpc.grpcWeb.allowOrigins=*"
      - "traefik.http.routers.mooncar.middlewares=mooncar-grpc"
1 Like
6

This topic was automatically closed 3 days after the last reply. New replies are no longer allowed.