Unable to call gRPC service from Angular client

Question

I am trying to call a gRPC service from Angular application.

If I host the server locally and call it from Anuglar application then it works.

    const client = new HelloWorldServiceClient("http://localhost:5001");
          
    const request = new SayHelloMessage();
    request.setName("User");
    
    client.sayHelloWorld(request, (err: any, response: any) => {
            
    if (err) {
         console.log(err);
         this.response = err;
         return;
    }
    this.response = response.getMessage();
  });

However, when I try to call a gRPC service hosted on a remote server it throws "Response closed without headers" error.

Changed code:

const client = new HelloWorldServiceClient("http://server_name:5001");

If I try to call the same service hosted on a server using NodeJS client then it works too.

NodeJS Code:

var url = "server_name_with_out_http:5001"; // e.g. server_name:5001 and not http://server_name:5001

const client = new HelloWorldServiceClient( 
    url,
    grpc.credentials.createInsecure()
);

var req = { name: "User" };

client.sayHelloWorld(req, (error, reply) => {
    if (!error) {
        console.log(reply.message);
    } else {
        console.log(error);
    }
});

What could be the reason why Angular application is not able to call gRPC service hosted on the server?

Chrome dev tool logs:

Answer 1

I would recommend to not directly call you backend from your browser client (if that's not want you are doing, let me know) and use a reverse proxy instead. There are many tools out there to do that:

• Traefik
• grpcwebproxy
• envoy

In fact the examples in gRPC's Github repository use envoy (check here) and one of the mail in the grpc-io mail list mentions that directly contacting your backend with your gRPC web frontend is not recommended.