Request fails in Browser

[gitmalong]

Hi!

I have a local CSR WASM browser app (based on https://github.com/leptos-rs/leptos/tree/main/examples/tailwind_csr_trunk ) that should connect to a local GRPC backend.

I verified that my grpc server is running and made some manual requests with help of grpcui: grpcui --plaintext localhost:50051

However the request from my WASM app fails.

Request in CURL format from Chrome:

curl 'http://127.0.0.1:50051/myapp.GrpcStorage/MigrateUp' \
  -H 'sec-ch-ua: "Google Chrome";v="117", "Not;A=Brand";v="8", "Chromium";v="117"' \
  -H 'sec-ch-ua-mobile: ?0' \
  -H 'User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/117.0.0.0 Safari/537.36' \
  -H 'content-type: application/grpc-web+proto' \
  -H 'accept: application/grpc-web+proto' \
  -H 'x-grpc-web: 1' \
  -H 'Referer: http://127.0.0.1:8080/' \
  -H 'sec-ch-ua-platform: "macOS"' \
  --data-raw $'\u0000\u0000\u0000\u0000\u0019\u0008ç\u000f\u0012\u0014\n\u0003EUR\u0012\rEurope/Berlin' \
  --compressed

ui-8e82adb6c6c1899d.js:577     POST http://127.0.0.1:50051/myapp.GrpcStorage/MigrateUp net::ERR_INVALID_HTTP_RESPONSE
...
(anonym) @ app:3
myapp-ui-8e82adb6c6c1899d.js:523 panicked at /Users/user/Documents/Code/myapp/storage-grpc-client/src/storage.rs:40:46:
called `Result::unwrap()` on an `Err` value: Status { code: Unknown, message: "js api error: TypeError: Failed to fetch", source: Some(JsError("TypeError: Failed to fetch")) }

Maybe the request is getting malformed ?!

[gitmalong]

I found some trace logs from the server.

Server debug logs

[2023-10-05T23:03:42Z TRACE tracing::span] -- connect;
[2023-10-05T23:03:42Z TRACE tracing::span] -- connect;
Server listening on 127.0.0.1:50051
[2023-10-05T23:03:45Z TRACE tracing::span] server_handshake;
[2023-10-05T23:03:45Z TRACE tracing::span::active] -> server_handshake;
[2023-10-05T23:03:45Z TRACE h2::codec::framed_write] FramedWrite::buffer; frame=Settings { flags: (0x0), initial_window_size: 1048576, max_frame_size: 16384, max_header_list_size: 16777216 }
[2023-10-05T23:03:45Z TRACE tracing::span::active] -> FramedWrite::buffer;
[2023-10-05T23:03:45Z DEBUG h2::codec::framed_write] send frame=Settings { flags: (0x0), initial_window_size: 1048576, max_frame_size: 16384, max_header_list_size: 16777216 }
[2023-10-05T23:03:45Z TRACE h2::frame::settings] encoding SETTINGS; len=18
[2023-10-05T23:03:45Z TRACE h2::frame::settings] encoding setting; val=InitialWindowSize(1048576)
[2023-10-05T23:03:45Z TRACE h2::frame::settings] encoding setting; val=MaxFrameSize(16384)
[2023-10-05T23:03:45Z TRACE h2::frame::settings] encoding setting; val=MaxHeaderListSize(16777216)
[2023-10-05T23:03:45Z TRACE h2::codec::framed_write] encoded settings rem=27
[2023-10-05T23:03:45Z TRACE tracing::span::active] <- FramedWrite::buffer;
[2023-10-05T23:03:45Z TRACE tracing::span] -- FramedWrite::buffer;
[2023-10-05T23:03:45Z TRACE tracing::span] flush;
[2023-10-05T23:03:45Z TRACE tracing::span::active] <- server_handshake;
[2023-10-05T23:03:45Z TRACE tracing::span::active] -> server_handshake;
[2023-10-05T23:03:45Z TRACE h2::server] state=Flushing(_)
[2023-10-05T23:03:45Z TRACE tracing::span::active] -> flush;
[2023-10-05T23:03:45Z TRACE tracing::span] FramedWrite::flush;
[2023-10-05T23:03:45Z TRACE tracing::span::active] -> FramedWrite::flush;
[2023-10-05T23:03:45Z TRACE h2::codec::framed_write] queued_data_frame=false
[2023-10-05T23:03:45Z TRACE h2::codec::framed_write] flushing buffer
[2023-10-05T23:03:45Z TRACE tracing::span::active] <- FramedWrite::flush;
[2023-10-05T23:03:45Z TRACE tracing::span] -- FramedWrite::flush;
[2023-10-05T23:03:45Z TRACE tracing::span::active] <- flush;
[2023-10-05T23:03:45Z TRACE h2::server] flush.poll=Ready
[2023-10-05T23:03:45Z TRACE tracing::span] read_preface;
[2023-10-05T23:03:45Z TRACE tracing::span] -- flush;
[2023-10-05T23:03:45Z TRACE tracing::span::active] -> read_preface;
[2023-10-05T23:03:45Z DEBUG h2::server] connection error PROTOCOL_ERROR -- read_preface: invalid preface;
[2023-10-05T23:03:45Z TRACE tracing::span::active] <- read_preface;
[2023-10-05T23:03:45Z TRACE tracing::span::active] <- server_handshake;
[2023-10-05T23:03:45Z TRACE tracing::span] -- server_handshake;
[2023-10-05T23:03:45Z DEBUG hyper::server::server::new_svc] connection error: http2 error: connection error detected: unspecific protocol error detected
[2023-10-05T23:03:45Z TRACE tracing::span] -- read_preface;
[2023-10-05T23:03:45Z TRACE tracing::span] -- server_handshake;

[gitmalong]

Adding https://crates.io/crates/tonic-web seems to help but now I get

Access to fetch at 'http://127.0.0.1:50051/myapp.GrpcStorage/Settings' from origin 'http://127.0.0.1:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

[gitmalong]

This setup worked: https://github.com/hyperium/tonic/blob/master/examples/src/grpc-web/server.rs