How to add header to flutter web http request?

Question

Flutter web app http request with package http: ^0.13.3. below is my code to retrieves data from api Server.

var data = await http.get(Uri.http(ServerRoot, "api/conversation/1"),);

But adding authentication header gives me following error. this same code working well on android and iOS project, but web project gives me error.

 var data = await http.get(Uri.http(ServerRoot, "api/conversation/1"),
                headers: {
      HttpHeaders.authorizationHeader: "bearer $token"
    });

I am unable to retrieve data and it gives me following error

Error: XMLHttpRequest error.
    dart-sdk/lib/_internal/js_dev_runtime/patch/core_patch.dart 909:28                get current
packages/http/src/browser_client.dart 71:22                                       <fn>
dart-sdk/lib/async/zone.dart 1613:54                                              runUnary
dart-sdk/lib/async/future_impl.dart 155:18                                        handleValue
dart-sdk/lib/async/future_impl.dart 707:44                                        handleValueCallback
dart-sdk/lib/async/future_impl.dart 736:13                                        _propagateToListeners
dart-sdk/lib/async/future_impl.dart 533:7                                         [_complete]
dart-sdk/lib/async/stream_pipe.dart 61:11                                         _cancelAndValue
dart-sdk/lib/async/stream.dart 1219:7                                             <fn>
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 324:14  _checkAndCall
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 329:39  dcall
dart-sdk/lib/html/dart2js/html_dart2js.dart 37307:58                              <fn>


    at Object.createErrorWithStack (http://localhost:49464/dart_sdk.js:5054:12)
    at Object._rethrow (http://localhost:49464/dart_sdk.js:37670:16)
    at async._AsyncCallbackEntry.new.callback (http://localhost:49464/dart_sdk.js:37666:13)
    at Object._microtaskLoop (http://localhost:49464/dart_sdk.js:37526:13)
    at _startMicrotaskLoop (http://localhost:49464/dart_sdk.js:37532:13)
    at http://localhost:49464/dart_sdk.js:33303:9

google chrome console message as follows

Danny Tuppeny · Answer 1 · 2021-06-23T17:31:55.943

2

This generic error is because the browser doesn't provide a proper error message that the http library can show:

https://github.com/dart-lang/http/blob/e89b190936d53d0e36148436283e28ba1091b35a/lib/src/browser_client.dart#L66-L72

  // Unfortunately, the underlying XMLHttpRequest API doesn't expose any
  // specific information about the error itself.

To debug this, you should use the Network tab in the browser developer tools to inspect the request sent to check it included the header as you expected, and if so, the servers response to see why it failed.

If the issue is CORS (and the CORS error isn't just because the server returned an error response), then you need to have the backend include the relevant CORS headers.

If it's a third party service, you should ask them about that. If it's your own service, then you need to add an Access-Control-Allow-Origin header that includes the Origins that should be allowed to use your service (do not include *.. you may need to temporarily use a localhost origin for testing, but please use the correct domain(s) for your sites when deploying so that other sites cannot call your APIs).

edited Jun 23 '21 at 17:31

answered Jun 23 '21 at 07:10

Danny Tuppeny

40,147
24
151
275

I have updated my question with google chrome developer console error , please have a look – Sulfy Jun 23 '21 at 07:30
Please check the Network tab and inspect the response from the server. I suspect it is an error response (which could be from authentication failing if your headers were not correct). The error suggests a CORS error, although it's possible that's just because the _error response_ doesn't include a CORS header, rather than being actually a CORS problem. – Danny Tuppeny Jun 23 '21 at 07:37
I have disabled web-security and its working now , but I don't think it is a good practice and I cannot ask end user to disable their web security to use my application – Sulfy Jun 23 '21 at 07:42
I agree - you should track down what the actual issue is by examining the Network tab. If the issue really is CORS, then you need the backend to supply an appropriate CORS header that allows your application to use it. It's not clear from your post whether the backend is something you're building, or a third party service. – Danny Tuppeny Jun 23 '21 at 10:03
I added some additional notes to the bottom of my answer. – Danny Tuppeny Jun 23 '21 at 10:06

score -1 · Answer 2 · answered Jun 23 '21 at 07:40

I found that it is an error with google chrome, I had to run following command on terminal to open google chrome with disabled security as suggested here

# MacOS
open -na Google\ Chrome --args --user-data-dir=/tmp/temporary-chrome-profile-dir --disable-web-security --disable-site-isolation-trials

my chrome showed a warning after doing so after doing so, I got the same code running on flutter web. I don't know if it is a better practice to disable web-security.

and I cannot ask user to disable web-security once dployed.

Please don't do this. See the updates to my answer. – Danny Tuppeny Jun 23 '21 at 10:06 — Danny Tuppeny, Jun 23 '21 at 10:06

How to add header to flutter web http request?

2 Answers2