"RpcError: Failed to fetch" with Typescript, Vite and Vue

[zpervan]

Hey everyone and sorry if I am asking noobish questions as I am quite new to all of this.

Anyways, I try to create a gRPC client with Vite, TS and Vue, by using the protobuf-ts/grpcweb-transport, but I get the following error constatly:

The client code is currently also very simple, and goes something like this:

import {GrpcWebFetchTransport} from "@protobuf-ts/grpcweb-transport";
import {BackendServiceClient} from "./main.client.ts";

const transport= new GrpcWebFetchTransport({baseUrl: "http://localhost:3500", format:"binary"});
const client = new BackendServiceClient(transport);

export async function ping() {
    const call = await client.testConnection({dummyData: "Vue!!"}, {});
    return call;
}

I was researching about other approaches but I started to somehow run in circles... I also used the examples provided within these packages so my code looks similar and still has the same error. By this point, I assume the generated gRPC proto files are correct (also the command for generating files is taken from the examples).

The gRPC server is working as I verified it with BloomRPC and a simple Rust client - both can easily send the testConnection command and get a response.

Hope you can help me out here.

Package versions:

    "@grpc/grpc-js": "^1.2.2",
    "@protobuf-ts/plugin": "^2.9.0",
    "@protobuf-ts/protoc": "^2.9.0",
    "@protobuf-ts/runtime": "^2.9.0",
    "@protobuf-ts/runtime-rpc": "^2.9.0",
    "@protobuf-ts/grpcweb-transport": "^2.9.0",
    "vue": "^3.3.4"
    "typescript": "^5.1.6",
    "vite": "^4.4.5",

[jcready]

You need to use a grpc-web proxy in front of your grpc service to translate between the two different protocols.

[bahag-ongwl]

You need to use a grpc-web proxy in front of your grpc service to translate between the two different protocols.

hi, do you have an example of how to implement this proxy?

[jcready]

Envoy is one such proxy which supports grpc to grpc-web translation. The grpc-web protocol is described in more detail here.