How to solve Error: XMLHttpRequest error. in Flutter Web

Question

I want to use to Google places api and I am trying to call this api but I am getting this. error

Error: XMLHttpRequest error.

static Future<List<Result>?> searchPlaces(context, String query) async {
    String mapApiKey = "API_KEY";
    String _host = 'https://maps.googleapis.com/maps/api/place/textsearch/json';
    final url = '$_host?query=$query&key=$mapApiKey';
    //
    var response = await http.get(Uri.parse(url));
    print(response.body);
    //
    if (response.statusCode == '200') {
      GPlacesSearch result = GPlacesSearch.fromJson(jsonDecode(response.body));
      return result.results!;
    } else
      return null;
  }
}

Ahmed Adel · Accepted Answer · 2022-05-25 07:08:06Z

5

I don't know which platform you are using, but I guess the solution would be to disable chrome web security.

If you are working on mac try the following steps

Go to flutter\bin\cache and remove a file named: flutter_tools.stamp
Go to flutter\packages\flutter_tools\lib\src\web and open the file chrome.dart.
Find '--disable-extensions'
Add '--disable-web-security'

And if you are working on windows just search for how to disable web security for chrome

answered May 25, 2022 at 7:08

Ahmed Adel

3643 silver badges10 bronze badges

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

7 Comments

Muhammad Shafique Over a year ago

Do we need to delete '--disable-extensions'?

Ahmed Adel Over a year ago

no you don't, just make sure to place '--disable-web-security' under it

Ahmed Adel Over a year ago

also make sure to add comma after both, because sometimes it cause some issues when leaving them out

Muhammad Shafique Over a year ago

Will it work in production?

Muhammad Shafique Over a year ago

It is working for debug

|

Muhammad Shafique · Accepted Answer · 2022-08-09 13:53:19Z

-1

Use this url 'https://cors-anywhere.herokuapp.com' before your actual url e.g.

String baseUrl = 'https://cors-anywhere.herokuapp.com';
String actualUrl = 'https://maps.googleapis.com/maps/api/place/textsearch/json';
String finalUrl = "$baseUrl/$actualUrl";

static Future<List<Result>?> searchPlaces(context, String query) async {
    String mapApiKey = "YOUR_KEY_HERE";
    var _sessionToken = Uuid().v4();
    String _host =
        'https://cors-anywhere.herokuapp.com/https://maps.googleapis.com/maps/api/place/textsearch/json';
    final url = '$_host?query=$query&key=$mapApiKey';
    //
    var response = await http.get(Uri.parse(url);

    //
    GPlacesSearch result = GPlacesSearch.fromJson(jsonDecode(response.body));
    return result.results!;
  }
}

edited Aug 9, 2022 at 13:53

answered May 25, 2022 at 10:11

Muhammad Shafique

61910 silver badges25 bronze badges

Collectives™ on Stack Overflow

How to solve Error: XMLHttpRequest error. in Flutter Web

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related