Skip to content

Edoardo Vignati

– Always looking for something awesome –

Menu
  • About me
  • Studies
  • Publications
  • Skills
  • Portfolio
  • Projects
  • Career
  • Blog
Menu

[SOLVED] XMLHttpRequest error in Flutter web is a CORS error

Posted on 08/10/202106/01/2023 by Edoardo

This is the error from http package in Flutter:

Error: XMLHttpRequest error.
    dart-sdk/lib/_internal/js_dev_runtime/patch/core_patch.dart 908:28                get current
packages/http/src/browser_client.dart 69:22                                       <fn>
dart-sdk/lib/async/zone.dart 1687:54                                              runUnary
dart-sdk/lib/async/future_impl.dart 160:18                                        handleValue
dart-sdk/lib/async/future_impl.dart 767:44                                        handleValueCallback
dart-sdk/lib/async/future_impl.dart 796:13                                        _propagateToListeners
dart-sdk/lib/async/future_impl.dart 593:7                                         [_complete]
dart-sdk/lib/async/stream_pipe.dart 61:11                                         _cancelAndValue
dart-sdk/lib/async/stream.dart 1232:7                                             <fn>
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 334:14  _checkAndCall
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 339:39  dcall
dart-sdk/lib/html/dart2js/html_dart2js.dart 37332:58                              <fn>


    at Object.createErrorWithStack (http://localhost:46627/dart_sdk.js:5074:12)
    at Object._rethrow (http://localhost:46627/dart_sdk.js:38925:16)
    at async._AsyncCallbackEntry.new.callback (http://localhost:46627/dart_sdk.js:38921:13)
    at Object._microtaskLoop (http://localhost:46627/dart_sdk.js:38778:13)
    at _startMicrotaskLoop (http://localhost:46627/dart_sdk.js:38784:13)
    at http://localhost:46627/dart_sdk.js:34519:9

This error is a Javascript error and it can be inspected from AndroidStudio terminal or from the browser console.

If you run into this problem it means that the requests to the API server are failing due to a CORS error.

When executing these types of requests from the web page, a sort of “pre authorization request” is made to the server. This request is an OPTIONS request that must be answered with a 2xx response. This is called PreFlight authorization. Make sure that your application is accepting the OPTIONS method.

A second step is the request itself (for example with GET method).

To allow a correct answer from the server, you need to add some headers to the response. In case you are using Apache and your API are public, you have to set the following headers (Apache configuration in this case):

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
    Header set Access-Control-Allow-Headers "Content-Type"
    Header set Referrer-Policy "no-referrer-when-downgrade"
</IfModule>

Take a look to Mozilla knowledge for more information about CORS and security concerns. To use authentication such as cookies, you cannot use the wildcard “*” in Access-Control-Allow-Origin header. This means that you have to write explicitly the origin url of the requests.

Moreover, CORS behavior is different between browser and apps. Dive into the topic in this interesting Reddit post.


Buy Me A Coffee


This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License.

4 thoughts on “[SOLVED] XMLHttpRequest error in Flutter web is a CORS error”

  1. Kiko says:
    20/11/2022 at 02:07

    Thanks, i have been reading for a long time to fit this problem, now i am relax, if you need something in Colombia, this is my e-mail. [email protected]

    Reply
    1. Edoardo says:
      24/11/2022 at 12:08

      Happy to know that you fixed it!

      Reply
  2. Fabi says:
    20/12/2022 at 08:47

    where is this to put in?

    Header set Access-Control-Allow-Origin “*”
    Header set Access-Control-Allow-Headers “Content-Type”
    Header set Referrer-Policy “no-referrer-when-downgrade”

    Reply
    1. Edoardo says:
      06/01/2023 at 20:13

      Hello Fabi, in my case I’m using Apache but you can add the headers in the webserver you prefer.

      Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  1. Edoardo on [SOLVED] XMLHttpRequest error in Flutter web is a CORS error06/01/2023
  2. Fabi on [SOLVED] XMLHttpRequest error in Flutter web is a CORS error20/12/2022
  3. Edoardo on How to install hplip on Ubuntu28/11/2022
  4. Alex K on How to install hplip on Ubuntu28/11/2022

© 2023 Edoardo Vignati | Powered by Minimalist Blog WordPress Theme
Manage Cookie Consent
To provide the best experiences, we use technologies like cookies to store and/or access device information. Consenting to these technologies will allow us to process data such as browsing behavior or unique IDs on this site. Not consenting or withdrawing consent, may adversely affect certain features and functions.
Functional Always active
The technical storage or access is strictly necessary for the legitimate purpose of enabling the use of a specific service explicitly requested by the subscriber or user, or for the sole purpose of carrying out the transmission of a communication over an electronic communications network.
Preferences
The technical storage or access is necessary for the legitimate purpose of storing preferences that are not requested by the subscriber or user.
Statistics
The technical storage or access that is used exclusively for statistical purposes. The technical storage or access that is used exclusively for anonymous statistical purposes. Without a subpoena, voluntary compliance on the part of your Internet Service Provider, or additional records from a third party, information stored or retrieved for this purpose alone cannot usually be used to identify you.
Marketing
The technical storage or access is required to create user profiles to send advertising, or to track the user on a website or across several websites for similar marketing purposes.
Manage options Manage services Manage vendors Read more about these purposes
View preferences
{title} {title} {title}