How can I use .proto generated .pb files in Wasm?

[limeniye]

Introductory information

I have gRPC microservices archetecture.
Now I'm trying to implement Envoy proxy for my gRPC services and WASM.
I made the HelloWorld + Envoy repository which works well with the Console Application:
https://github.com/limeniye/GreeterGrpcWebGateway

The problem

If I understood well -- browsers is not support HTTP/2.
But gRPC works only in HTTP2 protocol (correct me if I'm wrong).
Consequently, I need to transoport my request by following example:

But for the Web Application I need to convert a .proto files to .pb files:

protoc -I$(GOOGLEAPIS_DIR) -I. --include_imports --include_source_info --descriptor_set_out=envoy\protos\greet_definition.pb .\src\SampleGrpcSvc.Svc\Protos\greet.proto

And I seen a lot of examples for React or Angular how to add and how to use this .pb files in project.
But I don't understand how I can do this things for Uno.WASM.

What I have at this moment

Currently I created new branch for WASM:
https://github.com/limeniye/GreeterGrpcWebGateway/tree/wasm

And I have the following result of my a SayHelloAsync method:

'Status(StatusCode="Internal", Detail="Error starting gRPC call. HttpRequestException: TypeError: Failed to fetch JSException: TypeError: Failed to fetch", DebugException="System.Net.Http.HttpRequestException: TypeError: Failed to fetch\n ---> TypeError: Failed to fetch\n   --- End of inner exception stack trace ---\n   at System.Net.Http.BrowserHttpInterop.<CancelationHelper>d__13`1[[System.Runtime.InteropServices.JavaScript.JSObject, System.Runtime.InteropServices.JavaScript, Version=7.0.0.0, Cul…stsCts, CancellationToken originalCancellationToken) in D:\\a\\Uno.DotnetRuntime.WebAssembly\\Uno.DotnetRuntime.WebAssembly\\runtime\\src\\libraries\\System.Net.Http\\src\\System\\Net\\Http\\HttpClient.cs:line 552\n   at Grpc.Net.Client.Internal.GrpcCall`2.<RunCall>d__73[[Contracts.HelloRequest, App1, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null],[Contracts.HelloReply, App1, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].MoveNext() in /_/src/Grpc.Net.Client/Internal/GrpcCall.cs:line 493")'

P.S.

I lost about 5 weeks for this problem and I will appreciative for any information about it.

[jeromelaban]

When fetch is failing, you can generally find more details in the network tab of the browser for this particular query. In common cases, this is related to CORS, but it may be something else.

[limeniye]

@jeromelaban, thank you for your answer.
Yes, you are right, I have next error message:

Access to fetch at 'http://localhost:8080/greet.Greeter/SayHello' from origin 'http://localhost:5000' has been blocked by CORS policy: Request header field grpc-accept-encoding is not allowed by Access-Control-Allow-Headers in preflight response.

But I already allowed all cors:

services.AddCors(o => o.AddPolicy("AllowAll", builder =>
{
    builder.AllowAnyOrigin()
            .AllowAnyMethod()
            .AllowAnyHeader()
            .WithExposedHeaders("Grpc-Status", "Grpc-Message", "Grpc-Encoding", "Grpc-Accept-Encoding");
}));

app.UseCors("AllowAll");

endpoints.MapGrpcService<Services.GreeterService>().RequireCors("AllowAll");

Envoy

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

static_resources:
  listeners:
  - name: grpc
    address:
      socket_address: { address: 0.0.0.0, port_value: 8080 }
    filter_chains:
    - filters:
      - name: envoy.filters.network.http_connection_manager
        typed_config:
          "@type": type.googleapis.com/envoy.extensions.filters.network.http_connection_manager.v3.HttpConnectionManager
          codec_type: AUTO
          stat_prefix: grpc_json
          route_config:
            name: local_route
            virtual_hosts:
            - name: local_service
              domains: ["*"]
              routes:
              - match: { prefix: "/" , headers: [ { name: ":method", exact_match: "OPTIONS" } ] }
                route: { cluster: greeter-grpc-service, timeout: { seconds: 60 } }
              - match: { prefix: "/greet.Greeter", grpc: {} }
                route: { cluster: greeter-grpc-service, timeout: 60s }
              cors:
                allow_origin_string_match:
                    - prefix: "*"
                allow_methods: GET, PUT, DELETE, POST, OPTIONS
                allow_headers: token,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,grpc-timeout
                expose_headers: grpc-status,grpc-message,x-envoy-upstream-service-time
          http_filters:
          - name: envoy.filters.http.cors
            typed_config:
              "@type": type.googleapis.com/envoy.extensions.filters.http.cors.v3.Cors
          - name: envoy.filters.http.grpc_web
            typed_config:
              "@type": type.googleapis.com/envoy.extensions.filters.http.grpc_web.v3.GrpcWeb
          - name: envoy.filters.http.grpc_json_transcoder
            typed_config:
              "@type": type.googleapis.com/envoy.extensions.filters.http.grpc_json_transcoder.v3.GrpcJsonTranscoder
              proto_descriptor: "/data/greet_definition.pb"
              services: ["greet.Greeter"]
              print_options:
                add_whitespace: true
                always_print_primitive_fields: true
                always_print_enums_as_ints: false
                preserve_proto_field_names: true
          - name: envoy.filters.http.router
            typed_config:
              "@type": type.googleapis.com/envoy.extensions.filters.http.router.v3.Router

  clusters:
  - name: greeter-grpc-service
    type: logical_dns
    lb_policy: round_robin
    dns_lookup_family: V4_ONLY
    connect_timeout: 0.25s
    typed_extension_protocol_options:
      envoy.extensions.upstreams.http.v3.HttpProtocolOptions:
        "@type": type.googleapis.com/envoy.extensions.upstreams.http.v3.HttpProtocolOptions
        explicit_http_config:
          http2_protocol_options: {}
    load_assignment:
      cluster_name: grpc
      endpoints:
        - lb_endpoints:
            - endpoint:
                address:
                  socket_address:
                    address: host.docker.internal
                    port_value: 5001

[jeromelaban]

It looks like you're missing another CORS option. The javascript and HTTP documentation on MDN will likely help you some more.

[limeniye]

@jeromelaban , you was right.
I changed my Envoy config from

cors:
  allow_origin_string_match:
    - prefix: "*"
  allow_headers: token,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,grpc-timeout

to

cors:
  allow_origin_string_match:
    - exact: http://127.0.0.1:5000
  allow_headers: content-type,origin,referer,authorization,keep-alive,user-agent,cache-control,content-type,content-transfer-encoding,x-accept-content-transfer-encoding,x-accept-response-streaming,x-user-agent,x-grpc-web

Currently my SayHello break point in server side is raised! Its good news.
But my response is

Bad gRPC response. Response protocol downgraded to HTTP/1.1

I already added Http2UnencryptedSupport but it doesn`t helps me.

AppContext.SetSwitch("System.Net.Http.SocketsHttpHandler.Http2UnencryptedSupport", true);
var channel = GrpcChannel.ForAddress("http://localhost:8080", new GrpcChannelOptions()
{
    HttpClient = new HttpClient(new HttpClientHandler())
});
var client = new Greeter.GreeterClient(channel);

[limeniye]

I fixed it. Thank you @jeromelaban, you was right and solved this problem.
Currently this solution works as I want:

Wasm Client <-> Envoy <-> gRPC Service

I will not remove this repository in the future:
https://github.com/limeniye/GreeterGrpcWebGateway