IN Flutter Web getting 'XMLHttpRequest' error while making HTTP call

Question

I am using XAMPP control panel and using a local server like Apache port no 80, but in flutter web getting XMLHttpRequest error and in mobile device. The same coding fetches data using API not getting any error. How to fetch data using API while app run on flutter-web?

Error

Launching lib\main.dart on Chrome in debug mode...
Syncing files to device Chrome...
Debug service listening on ws://127.0.0.1:56619/FsXy3a4ZrZg=
Debug service listening on ws://127.0.0.1:56619/FsXy3a4ZrZg=
Error: XMLHttpRequest error.
    C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/patch/core_patch.dart 906:28                get current
packages/http/src/browser_client.dart 84:22                                                                                    <fn>
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/zone.dart 1450:54                                              runUnary
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/future_impl.dart 143:18                                        handleValue
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/future_impl.dart 696:44                                        handleValueCallback
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/future_impl.dart 725:32                                        _propagateToListeners
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/future_impl.dart 519:7                                         [_complete]
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/stream_pipe.dart 61:11                                         _cancelAndValue
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/stream.dart 1302:7                                             <fn>
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 324:14  _checkAndCall
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 329:39  dcall
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/html/dart2js/html_dart2js.dart 37312:58                              <fn>
    
    at Object.createErrorWithStack (http://localhost:5555/dart_sdk.js:4361:12)
    at Object._rethrow (http://localhost:5555/dart_sdk.js:38189:16)
    at async._AsyncCallbackEntry.new.callback (http://localhost:5555/dart_sdk.js:38183:13)
    at Object._microtaskLoop (http://localhost:5555/dart_sdk.js:38015:13)
    at _startMicrotaskLoop (http://localhost:5555/dart_sdk.js:38021:13)
    at http://localhost:5555/dart_sdk.js:33518:9

Backend Side PHP Webservice

<?php

header("Access-Control_Allow_Origin: *");
header("Access-Control-Allow-Credentials: true");
header("Content-type:application/json;charset=utf-8"); 
header("Access-Control-Allow-Methods: GET");

include 'config.php';

$sql="select * from calinsert";
$result=mysqli_query($conn,$sql)or die("query failed");

if(mysqli_num_rows($result) >0){
    $output=mysqli_fetch_all($result,MYSQLI_ASSOC);
    echo json_encode($output);
}
else{   
    echo json_encode(array('message'=>'no record found','status'=>false));
}
?>

Flutter Side Code

Future getdata()async {
    final response = await http.get(
        'http://localhost:80/web_service/calview.php',
        headers: {
          "Accept": "application/json",
          "Access-Control_Allow_Origin": "*"
        });

    print(response.statusCode);
    print(response.body);
  }

I have the same Problem do you have a solution? – Charles Down Feb 13 '21 at 23:20 — Charles Down, Feb 13 '21 at 23:20

score 8 · Answer 1 · answered Oct 26 '20 at 12:46

8

In most cases of Flutter API use, add Access-Control-Allow-Origin value in header might resolve the issue. (Note: This will help in access the local or external APIs)

header("Access-Control-Allow-Origin: *");

Hint: you have typo in your above header, please check and correct.

answered Oct 26 '20 at 12:46

Jubin Patel

1,959
19
38

1

This is most likely the problem as many others with this error solved it by adding CORS to their request header. I didn't catch the type as you did. – jaredbaszler Oct 26 '20 at 19:58
Where in my file do I have to to put the code? – Berl Jan 24 '21 at 14:13
@Berl its header part, where you define `Content-type` – Jubin Patel Jan 25 '21 at 05:07

score 4 · Answer 2 · edited Jul 23 '21 at 06:54

4

Fix the typo (replace underscores by dashes):

 header("Access-Control-Allow-Origin: *");

Add the following header in your php code:

header("Access-Control-Allow-Headers": "Access-Control-Allow-Origin, Accept");

edited Jul 23 '21 at 06:54

Badr Bellaj

11,560
2
43
44

answered May 10 '21 at 23:27

Myoch

793
1
6
24

score 3 · Answer 3 · answered Jun 27 '21 at 09:36

3

Just removed the header attribute from the post method and it works for me.

answered Jun 27 '21 at 09:36

Malis

31
1

2

Yes, But I need to send headers with my post request!!!! – Taleb Dec 22 '21 at 16:39

score 1 · Answer 4 · answered Oct 23 '20 at 02:31

1

I was recently getting this error as well and I seem to have fixed by upgrading my package to the most recent 0.12.2 version and it seems to have helped - so far.

https://pub.dev/packages/http

answered Oct 23 '20 at 02:31

jaredbaszler

3,941
2
32
40

1

@DarpitPatel - have you checked the browser console to see if there is any more specific errors that might help identify the root cause? https://github.com/dart-lang/http/issues/433 – jaredbaszler Oct 23 '20 at 15:04
1

Is this issue only for web app or also getting issue for mobile app deployment? – Jubin Patel Oct 26 '20 at 12:38
1

@JubinPatel yes it's only on flutter web app – Abdulmalek Dery Feb 06 '21 at 13:45
2

did you find the solution? – Shubham Sawant Feb 24 '21 at 17:46

score 1 · Answer 5 · answered Oct 02 '22 at 00:34

1

Simply it is CORS error. you have to add "localhost:XXXX" or the corresponding address to the CORS origins in the backend code to get it run in debug mode. Eg: in FastAPI, CORS Management in FastAPI

answered Oct 02 '22 at 00:34

athul nandaswaroop

11
1

score 1 · Answer 6 · answered Jul 14 '23 at 12:51

I got the same error message and tried all to config the CORS policies right and it was working from the browser with a simple Javascript fetch but not with Flutter Web http.

Long story short, it fails becausee of my self signed certificate.

As it turned out the badCertificateCallback i was using for Flutter mobile is not working with Flutter web.

Maybe that helps someone.

Marty Spallone · Answer 7 · 2021-03-30T15:10:22.403

0

Thank you! F12 Tools -> Access to XMLHttpRequest at 'https://localhost:44360/xxyy' from origin 'http://localhost:52273' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

More info - CORS is usually a sever side issue, you have to set up what clients are allowed. For development purposes, my flutter web is talking to a .net core service so I had to enable CORS in development mode only to allow CORS using the following:

builder
                .AllowAnyOrigin()
                .WithHeaders(HeaderNames.AccessControlAllowHeaders, "Content-Type")
                .AllowAnyMethod();

        }));

edited Mar 30 '21 at 15:10

answered Mar 18 '21 at 04:15

Marty Spallone

51
4

what is the solution ? – mohamed elyamani Mar 29 '21 at 12:46
I updated post with my service config using .net core. Your service might be different. Basically allow CORS for development. – Marty Spallone Mar 30 '21 at 15:11

score 0 · Answer 8 · answered Dec 02 '21 at 10:01

0

The problem arose for me with my Appwrite server. I just had to add localhost as a trusted web app and it started working without issues.

answered Dec 02 '21 at 10:01

Abdelghani Bekka

576
9
18

Can you explain how you did that? – Taleb Dec 22 '21 at 16:40

IN Flutter Web getting 'XMLHttpRequest' error while making HTTP call

8 Answers8

Linked