gRPC web using make error

[saeed-golshan]

I use grpc in flutter app that work properly but when grpc/grpc_web.dart is imported and using GrpcWebClientChannel.xhr(Uri.parse('http://localhost:50051')) this error has occurred: Caught error: gRPC Error (code: 2, codeName: UNKNOWN, message: HTTP request completed without a status (potential CORS issue), details: null, rawResponse: , trailers: {})

grpc: dependency: "direct main" description: name: grpc url: "https://pub.dartlang.org" source: hosted version: "3.0.2"

[✓] Flutter (Channel stable, 2.5.2, on macOS 11.6 20G165 darwin-x64, locale en-US) • Flutter version 2.5.2 at /Users/user/development/flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision 3595343e20 (2 weeks ago), 2021-09-30 12:58:18 -0700 • Engine revision 6ac856380f • Dart version 2.14.3

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3) • Android SDK at /Users/user/Library/Android/sdk • Platform android-30, build-tools 30.0.3 • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7281165) • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS • Xcode at /Applications/Xcode.app/Contents/Developer • Xcode 13.0, Build version 13A233 • CocoaPods version 1.10.2

[✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2020.3) • Android Studio at /Applications/Android Studio.app/Contents • Flutter plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/9212-flutter • Dart plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/6351-dart • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7281165)

[✓] VS Code (version 1.61.1) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.27.0

[✓] Connected device (2 available) • macOS (desktop) • macos • darwin-x64 • macOS 11.6 20G165 darwin-x64 • Chrome (web) • chrome • web-javascript • Google Chrome 94.0.4606.81

• No issues found!

Please make it auto detect web for easier using library

[PlugFox]

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

[williamxhannah]

Hi Saeed, salam - man Irani hastam

• did you get the answer to your question - I have the same issue and stuck.

[saeed-golshan]

Hi @williamxhannah Yes offcourse I found a solution for this problem. For grpc web you must use envoy proxy. You can use envoy config from this stackoverflow question: https://stackoverflow.com/questions/70402161/using-grpc-web-with-dart

[williamxhannah]

I used Envoy first - still face the same cors issue - that is why i put the web server on the api host thinking that if they are on the same server, cors would not occur.but that did not work either.

[saeed-golshan]

I have similar issue but when I change ports the problem solved and I used both of them in same server

[williamxhannah]

Strange - I use 8080 for Envoy which call the api on 5000 - do you see issues with that - I don't understand why changing port number would have helped.

[saeed-golshan]

Sure, I change ports temporary and set them again just for system cach

[mraleph]

If you are facing issues in the browser I suggest inspecting networking traffic in devtools to see what kind of CORS headers you are sending. By default CORS requires same origin --- which implies same protocol, host and port. You need appropriate Access-Control-Allow-Origin to prevent CORS from blocking your traffic if the ports are different. (Note: I am talking about port you use to serve your web site vs port you use to serve grpc-web protocol. Port used for underlying grpc protocol to which Envoy proxies should not matter).

In any case it is next to impossible to help you if you don't provide sufficient details about the error you are facing.

[vsly-ru]

In my case, this error was caused by the fact that I set --backend_addr's port of the golang grpc-web proxy to the same one as its output port. That's why flag --allow_all_origins wasn't helping in my case.