I'm novice in gRPC. My program is written with ‍‍nuxtjs and is a simple login page that receives the username and password and sends it to the server using gRPC. Everything is fine when I submit a request with BloomRPC. But when using the browser, the request is not sent to the server.

My auth class is as follow:

// auth.js

export default class {
  constructor(vars) {
    this.tokenKey = vars.tokenKey
    this.proto = vars.proto
    this.client = new vars.proto.AuthenticationClient('http://127.0.0.1:50051', null, null)
  }

  async loginRequest(user) {
    const request = new this.proto.LoginRequest()
    request.setUsername(user.username.trim().toLowerCase())
    request.setPassword(user.password.trim()) 
    return await this.client.login(request, {})    
  } 
}

This error is shown when requesting to the server with the browser, whether the server is up or not.

net ERROR_CONNECTION_REFUSED
message: 'Http response at 400 or 500 level'
...

Chrome Screenshot:

Do I have to do a specific configuration?

I just want a hint for configuring.

UPDATE:

This link says that you should use Envoy. But why do we need it? And how do I configure it?

BloomRPC screenshot:

As you can see on the right side of the image, the answer is returned correctly.