grpc_web: 415 Unsupported Media Type

[doocaat]

Hi all, I'm trying to use grpc in my flutter web application, but I get a 415 Unsupported Media Type error in the browser when invoked grpc method.

I use packages in my pubspec.yml

  grpc: 3.2.4
  protobuf: 3.1.0

Client code

import 'package:grpc/grpc_web.dart';
import 'package:proto_v1/proto_v1.dart';

class EchoService {
  late final EchoServiceClient client;

  EchoService(String host, int port) {
    var channel = GrpcWebClientChannel.xhr(Uri.parse("http://$host:$port"));
    client = EchoServiceClient(channel);
  }

  Future<EchoResponse> echo(String message) async {
    return await client.echo(EchoRequest(message: message));
  }
}

Expected result: Receive a response from the grpc server

Actual result: I'm getting an error in browser: 415 (Unsupported Media Type)

Details

The grpc server call works in Postman without problems but In chrome browser console has errors:

xhr_transport.dart:54 POST http://server:8787/echo.EchoService/Echo 415 (Unsupported Media Type)

Uncaught (in promise) Error: gRPC Error (code: 3, codeName: INVALID_ARGUMENT, message: invalid gRPC request content-type "application/grpc-web+proto", details: [], rawResponse: null, trailers: {content-length: 0})

[doocaat]

I fixed it, as it turned out grpc in the browser should be handled separately, for this I used this github.com/improbable-eng/grpc-web and the browser started working correctly.