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
– Charles Down

2021-02-13 23:20:31 +00:00
Commented Feb 13, 2021 at 23:20 — Charles Down
– Charles Down, Commented Feb 13, 2021 at 23:20

Jubin Patel · Accepted Answer · 2020-10-26 12:46:42Z

12

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, 2020 at 12:46

Jubin Patel

2,05221 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

jaredbaszler Over a year ago

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.

Berl Over a year ago

Where in my file do I have to to put the code?

Jubin Patel Over a year ago

@Berl its header part, where you define Content-type

Malis · Accepted Answer · 2021-06-27 09:36:11Z

4

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

answered Jun 27, 2021 at 9:36

Malis

491 bronze badge

1 Comment

Taleb Over a year ago

Yes, But I need to send headers with my post request!!!!

Badr Bellaj · Accepted Answer · 2021-07-23 06:54:09Z

3

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, 2021 at 6:54

Badr Bellaj

13.1k3 gold badges47 silver badges47 bronze badges

answered May 10, 2021 at 23:27

Myoch

8751 gold badge7 silver badges27 bronze badges

1 Comment

Nalawala Murtaza Over a year ago

2 nd point not understood can you share some examples? i m use laravel for api.

jaredbaszler · Accepted Answer · 2020-10-23 02:31:03Z

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, 2020 at 2:31

jaredbaszler

4,8693 gold badges35 silver badges42 bronze badges

4 Comments

jaredbaszler Over a year ago

@DarpitPatel - have you checked the browser console to see if there is any more specific errors that might help identify the root cause? github.com/dart-lang/http/issues/433

Jubin Patel Over a year ago

Is this issue only for web app or also getting issue for mobile app deployment?

Abdulmalek Dery Over a year ago

@JubinPatel yes it's only on flutter web app

Shubham Sawant Over a year ago

did you find the solution?

athul nandaswaroop · Accepted Answer · 2022-10-02 00:34:51Z

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 2, 2022 at 0:34

athul nandaswaroop

111 bronze badge

Comments

exception · Accepted Answer · 2023-07-14 12:51:52Z

1

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.

answered Jul 14, 2023 at 12:51

exception

4232 gold badges6 silver badges11 bronze badges

Comments

Marty Spallone · Accepted Answer · 2021-03-30 15:10:22Z

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, 2021 at 15:10

answered Mar 18, 2021 at 4:15

Marty Spallone

514 bronze badges

2 Comments

mohamed elyamani Over a year ago

what is the solution ?

Marty Spallone Over a year ago

I updated post with my service config using .net core. Your service might be different. Basically allow CORS for development.

Abdelghani Bekka · Accepted Answer · 2021-12-02 10:01:09Z

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 2, 2021 at 10:01

Abdelghani Bekka

68410 silver badges18 bronze badges

1 Comment

Taleb Over a year ago

Can you explain how you did that?

user22651113 · Accepted Answer · 2023-09-28 11:58:29Z

0

you have to add "https://app.flutterflow.io" to your list of allowed origins from your app

answered Sep 28, 2023 at 11:58

user22651113

1

1 Comment

Nageen Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

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

9 Answers 9

3 Comments

1 Comment

1 Comment

4 Comments

Comments

Comments

2 Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

3 Comments

1 Comment

1 Comment

4 Comments

Comments

Comments

2 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related