how do I make requests with node js grpc server vue js

Question

I am having such a problem when sending a request to the grpc server with vuejs, how can I do?

How can I create a nodejs grpc server and use vue js as a client to send a request and get a response.

MyServer Code here;

const grpc = require("grpc");
const loader = require("@grpc/proto-loader")
const packageDef = loader.loadSync("user.proto", {});
const object = grpc.loadPackageDefinition(packageDef);
const userPackage = object.userPackage;
const server = new grpc.Server()
server.addService(userPackage.User.service, {
    "createUser": createUser,
})

const users = []
server.bind('0.0.0.0:5000', grpc.ServerCredentials.createInsecure())
console.log('Server running at http://127.0.0.1:5000')
function createUser(call, callback) {
    const userItem = {
        id: users.length + 1,
        name: call.request.name,
        lastname: call.request.lastname
    }
    users.push(userItem)
    console.log('_', call)
    console.log('cb', callback)
    callback(null, userItem);

}


server.start()

My user.proto here;

syntax = "proto3";

package userPackage;

service User{
    rpc createUser(UserItem) returns (UserItem); //unary
}

message UserItem{
    int32 id = 1;
    string name= 2;
    string lastname= 3;
}

and My Client Code here;

<script>
import {UserClient} from './proto/proto-gen/user_grpc_web_pb'
import { UserItem} from './proto/proto-gen/user_pb'
  created(){
    this.client=new UserClient('http://0.0.0.0:5000',{})
    const item=new UserItem()
    item.setId(1)
    item.setName('aaa')
    item.setLastname('bbb')
    
    this.client.createUser(item,{'Access-Control-Allow-Origin': '*'},(err,response)=>{
      console.log(`error`, err)
      console.log(`response`, response)

    })
  },

</script>

Error is here;

error {code: 2, message: "Http response at 400 or 500 level", metadata: {…}}
http://0.0.0.0:5000/userPackage.User/createUser net::ERR_ADDRESS_INVALID