Grpc-web: Client throws base64 encoding error on RPC call

Created on 11 May 2018 · 9Comments · Source: grpc/grpc-web

Given the following sample web page

<html>
    <meta charset="utf-8"/>
    <script src="compiled.js"></script>
    <script>

        var client = new proto.API.ServiceClient('127.0.0.1:50051');

        var query = new proto.API.Query();
        query.setMessagesList(["testing", "1", "2", "3"]);

        client.get(query, {}, function(error, response) {
            if (error) {
                console.log(error);
            } else {
                console.log(reponse.getResponse());
            }
        });
    </script>
</html>

A JavaScript error is thrown at client.get with the following stacktrace.

Error: Unknown base64 encoding at char: <
compiled.js:429:210
c
http://localhost:3000/compiled.js:429:210
goog.crypt.base64.decodeStringInternal_
http://localhost:3000/compiled.js:429:312
goog.crypt.base64.decodeStringToUint8Array
http://localhost:3000/compiled.js:428:277
module$contents$grpc$web$GrpcWebClientReadableStream_GrpcWebClientReadableStream/<
http://localhost:3000/compiled.js:432:237
goog.events.EventTarget.prototype.fireListeners
http://localhost:3000/compiled.js:279:296
goog.events.EventTarget.dispatchEventInternal_
http://localhost:3000/compiled.js:281:475
goog.events.EventTarget.prototype.dispatchEvent
http://localhost:3000/compiled.js:276:274
goog.net.XhrIo.prototype.onReadyStateChangeHelper_
http://localhost:3000/compiled.js:401:485
goog.net.XhrIo.prototype.onReadyStateChangeEntryPoint_
http://localhost:3000/compiled.js:400:491
goog.net.XhrIo.prototype.onReadyStateChange_
http://localhost:3000/compiled.js:400:387
<anonymous> self-hosted:975:17

I'm a little puzzled by the method signature of client.get. Are there any docs which point me in the direction of what the empty object in the second parameter is doing?

Source

atecce

All 9 comments

Can you show me your .proto definition please?

stanley-cheung on 11 May 2018

sure thing! omw home now. i’m mobile.

Get Outlook for iOShttps://aka.ms/o0ukef

From: Stanley Cheung notifications@github.com
Sent: Friday, May 11, 2018 5:47:08 PM
To: grpc/grpc-web
Cc: Alex Tecce; Author
Subject: Re: [grpc/grpc-web] Client throws base64 encoding error on RPC call (#183)

Can you show me your .proto definition please?

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHubhttps://nam03.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fgrpc%2Fgrpc-web%2Fissues%2F183%23issuecomment-388494007&data=02%7C01%7C%7Ca2efe5082cde41d7141808d5b788bed4%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636616720294983122&sdata=df3IF%2BbzXY%2FAVyDTjnh9wuCv%2FJ46oFDfuepqmgUs4vQ%3D&reserved=0, or mute the threadhttps://nam03.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FAKE9yAYgLiiZN_ik6HIaNZ0I1NMjcFZxks5txgbcgaJpZM4T792J&data=02%7C01%7C%7Ca2efe5082cde41d7141808d5b788bed4%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636616720294983122&sdata=K3DpzfAaoKBt8LyUIb4TDYce30fe8RWTbvvc1VNfSJM%3D&reserved=0.

atecce on 11 May 2018

Just to confirm, you have compiled our nginx module and run that as proxy. The :50051 port is your nginx port right? And have you tried to run the Echo example that comes with this repo?

Btw, the 2nd parameter of the generated RPC call is metadata, may be relevant if your server is expecting them. Otherwise you can leave it empty.

stanley-cheung on 11 May 2018

no. i’m not running the nginx proxy. just hitting a service defined in C#

Get Outlook for iOShttps://aka.ms/o0ukef

From: Stanley Cheung notifications@github.com
Sent: Friday, May 11, 2018 5:50:47 PM
To: grpc/grpc-web
Cc: Alex Tecce; Author
Subject: Re: [grpc/grpc-web] Client throws base64 encoding error on RPC call (#183)

Just to confirm, you have compiled our nginx module and run that as proxy. The :50051 port is your nginx port right? And have you tried to run the Echo example that comes with this repo?

Btw, the 2nd parameter of the generated RPC call is metadata, may be relevant if your server is expecting them. Otherwise you can leave it empty.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHubhttps://nam01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fgrpc%2Fgrpc-web%2Fissues%2F183%23issuecomment-388494731&data=02%7C01%7C%7Ce4b2223d7dea40e818e208d5b789413c%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636616722483179077&sdata=xUnCGJSRLcFZ8tDgNdhoM5R3e7MrGb5eQfy3Pt2AG40%3D&reserved=0, or mute the threadhttps://nam01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FAKE9yIqdTyfpqKV9dwxget1LhtBSm4EQks5txge3gaJpZM4T792J&data=02%7C01%7C%7Ce4b2223d7dea40e818e208d5b789413c%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636616722483179077&sdata=CqUC3SiQcmVDDHO7D%2BrIBAi9%2Fb1NWZ%2FzPpCdTQlJ%2F7Y%3D&reserved=0.

atecce on 11 May 2018

Yea that won't work. grpc-web currently cannot talk to a gRPC backend server directly because of various browser limitations. So the grpc-web client currently talks a "grpc-web" protocol, which needs translation. A reference proxy implementation is included in this repo as a custom module of Nginx. So you need to compile the Nginx that comes with this repo so that the grpc-web client request can be translated into a gRPC call to the backend, and vice versa in the other direction.

stanley-cheung on 11 May 2018

heh. that will do it. thanks so much! i’ll get to work on that

Get Outlook for iOShttps://aka.ms/o0ukef

From: Stanley Cheung notifications@github.com
Sent: Friday, May 11, 2018 5:55:59 PM
To: grpc/grpc-web
Cc: Alex Tecce; Author
Subject: Re: [grpc/grpc-web] Client throws base64 encoding error on RPC call (#183)

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHubhttps://nam04.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fgrpc%2Fgrpc-web%2Fissues%2F183%23issuecomment-388495712&data=02%7C01%7C%7C13f25c2edb384b9af9d908d5b789fb32%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636616725604601486&sdata=VNBEGuf0i6WAKARcIc8J%2FMTs%2BzWRzyshmmb7SzePNrE%3D&reserved=0, or mute the threadhttps://nam04.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FAKE9yLmQNgfFjTwttCLvTtxX4QFUYRk1ks5txgjvgaJpZM4T792J&data=02%7C01%7C%7C13f25c2edb384b9af9d908d5b789fb32%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636616725604757738&sdata=XBJxRkI19txT7t1TRh83CeRMhw32lahHVN09leUzkjw%3D&reserved=0.

atecce on 11 May 2018

See the Echo example here: https://github.com/grpc/grpc-web/tree/master/net/grpc/gateway/examples/echo

stanley-cheung on 11 May 2018

👍1

@atecce There's also a GRPC-Web proxy implemented in Go by Improbable, available here:

https://github.com/improbable-eng/grpc-web/tree/master/go/grpcwebproxy

I found it a bit easier to set up.