Grpc-web: Echo Demo not Working

[joshjung]

Hey there, a couple of us in our office have recently followed the directions in INSTALL.md and the net/grpc/gateway/examples/echo/README.md.

After following the instructions without any visible errors, we can confirm that the docker instances are all running as expected:

Joshuas-MacBook-Pro:~/dev/grpc-web (master % u=)$ docker ps CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES d70c3b126c95 grpcweb/closure-client "nginx" Less than a second ago Up 2 seconds 0.0.0.0:8081->8081/tcp modest_bohr 930f5ebfbbb6 grpcweb/envoy "/usr/bin/dumb-init …" 57 seconds ago Up About a minute 0.0.0.0:8080->8080/tcp, 10000/tcp eloquent_heisenberg 7dd1c9f8ce1f grpcweb/echo-server "/github/grpc-web/ne…" 3 minutes ago Up 3 minutes 0.0.0.0:9090->9090/tcp echo-server

However, when running http://localhost:8080/net/grpc/gateway/examples/echo/echotest.html in the browser, we get:

upstream connect error or disconnect/reset before headers

We have also attempted to hook up our own GRPC service and a custom Envoy container with a HTTP-GRPC proxy and are getting the exact same error for any validly formatted POST request we send to the envoy proxy.

This is a complete blocker for us at this time. Any ideas?

EDIT: Discovered the echo README.md documentation is wrong, the browser URL should be:

http://localhost:8081/echotest.html

However, this also breaks as it can't load the main.js file and I now get this error:

GET http://localhost:8081/dist/main.js net::ERR_ABORTED 404 (Not Found)

[stanley-cheung]

Does running the pre-packaged Echo demo works for you?

$ docker-compose pull prereqs common echo-server envoy commonjs-client
$ docker-compose up -d echo-server envoy commonjs-client

If that works, we can isolate which piece is not working. There are 3 docker images running in that example.

1. The echo-server docker image is just a plain gRPC backend server. It can be implemented in any language. This particular one listens at port :9090. Other gRPC client should be able to directly connect to it.

2. The envoy docker image runs the standard Envoy binary, and forwards requests listening from the browser clients at :8080 to the backend at :9090.

3. The commonjs-client docker image builds the JS client, and hosts the static content (i.e. echotest.html and dist/main.js) at :8081. So that's why you have to request for localhost:8081/echotest.html as the browser entry point.

Once you do an action on the webpage (hit the Send button or hit enter), the JS sends the gRPC-Web requests to :8080. Envoy should translate and forward the request to your gRPC backend server at :9090, and translate the response back to the browser client.

Can you try the pre-package Echo demo first?

[dzolotusky]

I've been working with @joshjung on some of this and saw the same issues. It looks like the problem is in the commonjs-client docker image.

I have it deployed as the grpcweb/closure-client image. Is that wrong and it should be commonjs-client?

When I use grpcurl and point it to the reflection endpoint on localhost:9090 or localhost:8080, I get a correct list of gRPC endpoints. So, I assume that both the gRPC server and the Envoy proxy are working correctly.

[stanley-cheung]

Both of those should work. As in:

$ docker-compose up -d echo-server envoy commonjs-client

and

$ docker-compose up -d echo-server envoy closure-client

should both work.

In fact, swapping envoy with nginx, all 4 combinations should work.

But just to make sure: only 1 of envoy or nginx should be run at the same time. Same for only 1 of commonjs-client and closure-client should be run at the same time, because these pair of images listens at the same port. Might it be possible that a previous docker images was still running causing some issues with overlapping port?

With #299, I suppose you got the commonjs-client version working? Is that right?

[hunnain]

stanley basically i set a envoy proxy
My envoy proxy docker file
Dockerfile

FROM envoyproxy/envoy:latest
CMD /usr/local/bin/envoy -c ../../envoy.yaml -l trace --log-path /tmp/envoy_info.log

My evoy.yaml file

admin:
  access_log_path: /tmp/admin_access.log
  address:
    socket_address: { address: 0.0.0.0, port_value: 8081 }

static_resources:
  listeners:
  - name: listener_0
    address:
      socket_address: { address: 0.0.0.0, port_value: 8081 }
    filter_chains:
    - filters:
      - name: envoy.http_connection_manager
        config:
          codec_type: auto
          stat_prefix: ingress_http
          route_config:
            name: local_route
            virtual_hosts:
            - name: local_service
              domains: ["*"]
              routes:
              - match: { prefix: "/" }
                route: { cluster: echo_service }
              cors:
                allow_origin:
                - "*"
                allow_methods: GET, PUT, DELETE, POST, OPTIONS
                allow_headers: keep-alive,user-agent,cache-control,content-type,content-transfer-encoding,custom-header-1,x-accept-content-transfer-encoding,x-accept-response-streaming,x-user-agent,x-grpc-web
                max_age: "1728000"
                expose_headers: custom-header-1,grpc-status,grpc-message
                enabled: true
          http_filters:
          - name: envoy.grpc_web
          - name: envoy.cors
          - name: envoy.router
  clusters:
  - name: echo_service
    connect_timeout: 0.25s
    type: logical_dns
    http2_protocol_options: {}
    lb_policy: round_robin
    hosts: [{ socket_address: { address: 0.0.0.0, port_value: 9090 }}]

My grpc server running on port 9090 when i run docker compose up -d envoy so it will run and when i hit the url localhost:8080 from browser it show me upstream connect error or disconnect/reset before headers
When i used grpc-web in react
My React code
const client = new TodoServiceClient('http://localhost:8080'); var request = new Todo(); request.setTodo('My todo'); // request.setDescription("My description") var metadata = {'custom-header-1': 'value1'}; var call = client.insert(request, metadata, function(err, response) { if (err) { console.log("My error",err.code); console.log("My error message",err.messge); } else { console.log(response.getMessage()); } });
So when i used in react and run so it shoe me error code 12

Stanley what i am doing wrong i have also create proxy
My React clientside is running on localhost:8081

[stanley-cheung]

Had a chat offline - the original issue in this thread was resolved. There are some documentation update I will add soon, especially around compiling the protoc plugin.

[stanley-cheung]

Closing this. Original issue was resolved. Added a blurb on how to compile the protoc-gen-grpc-web plugin here: https://github.com/grpc/grpc-web#code-generator-plugin

[oswee]

I see this is closed, but actually the same issue there when following - https://github.com/grpc/grpc-web/tree/master/net/grpc/gateway/examples/helloworld guide. Just reporting.