how can I solve XMLHttpRequest error with flutter?

Question

error while getting the url with http library:

Future<List<Sensor>> fetchSensores() async {
  final response = await http.get(
      Uri.parse(
          'https://firebasestorage.googleapis.com/v0/b/ecosolutions-73ab2.appspot.com/o/sensores.json?alt=media&token=09ac9e63-744d-4286-aae1-c4eadd81c026'),
      headers: {
        "Accept": "application/json",
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Headers": "Access-Control-Allow-Origin, Accept"
      });
  if (response.statusCode == 200) {
    return compute(parseSensores, response.body);
  } else {
    throw Exception('Error');
  }
}

Error: XMLHttpRequest error.

refer my answer [here](https://stackoverflow.com/a/68493792/13997210) hope its help to you — Ravindra S. Patil, Sep 09 '21 at 09:37
Thanks for you answer but it doesn't work, now I get 403 error — Diego jiménez, Sep 09 '21 at 09:56
But the link I provide is works... so what's the issue ? I changed the firebase storage rules so everyone could access. — Diego jiménez, Sep 09 '21 at 10:00
The rest of the code works perfectly. This list is a json to simulate a data server. I tried getting the json from assets and it works. The problem is with the http.get. Thank you ! — Diego jiménez, Sep 09 '21 at 10:03

score 0 · Answer 1 · answered Sep 09 '21 at 10:41

try below code I think your problem is solved and its help to you. and I have display your data in list. I also set CORS for XML request please check it

import 'dart:convert';
import 'package:http/http.dart' as http;
import 'package:flutter/material.dart';

class Jobs extends StatefulWidget {
  @override
  _JobsState createState() => _JobsState();
}

class _JobsState extends State<Jobs> {
  Future<List> getJobsData() async {
    String url =
        'https://firebasestorage.googleapis.com/v0/b/ecosolutions-73ab2.appspot.com/o/sensores.json?alt=media&token=09ac9e63-744d-4286-aae1-c4eadd81c026';

    var response = await http.get(Uri.parse(url), headers: {
      "Access-Control-Allow-Origin": "*", // Required for CORS support to work
      "Access-Control-Allow-Credentials":
          'true', // Required for cookies, authorization headers with HTTPS
      "Access-Control-Allow-Headers":
          "Origin,Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token,locale",
      "Access-Control-Allow-Methods": "POST, OPTIONS"
    });
    print(response.body);
    return json.decode(response.body);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Jobs'),
      ),
      body: Column(
        children: [
          Expanded(
            child: Center(
              child: FutureBuilder<List>(
                future: getJobsData(),
                builder: (context, snapshot) {
                  if (snapshot.hasData) {
                    return Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: ListView.builder(
                        itemCount: snapshot.data.length,
                        itemBuilder: (context, index) {
                          var title = snapshot.data[index]['nombre'];
                          var company =
                              snapshot.data[index]['description_tiempo'];
                          var skills = snapshot.data[index]['numero_sensor'];
                          var description = snapshot.data[index]['presion'];
                          var positions =
                              snapshot.data[index]['direccin_viento'];
                          return Card(
                            shape: RoundedRectangleBorder(
                              side: BorderSide(color: Colors.green.shade300),
                              borderRadius: BorderRadius.circular(15.0),
                            ),
                            child: Column(
                              children: [
                                ListTile(
                                  leading: Text(skills.toString()),
                                  title: Text(title),
                                  subtitle: Text(
                                    company + '\n' + description.toString(),
                                  ),
                                  trailing: Text(positions.toString()),
                                ),
                              ],
                            ),
                          );
                        },
                      ),
                    );
                  }
                  return CircularProgressIndicator();
                },
              ),
            ),
          ),
        ],
      ),
    );
  }
}

your result screen ->

Hi Ravinra, thanks for your answer ! I'm sorry but what do you mean by set CORS for XML request ? — Diego jiménez, Sep 09 '21 at 13:22
Cross-Origin Resource Sharing (CORS) is an HTTP-header based mechanism it means that request to your web server for certain location by specific response headers — Ravindra S. Patil, Sep 09 '21 at 13:43
Okay, and I have to downloaded ir like if it is a package or something ? — Diego jiménez, Sep 09 '21 at 14:10
No need to install any packages or something just set the CORS same as my answer in header section if your problem solve by answer please upvote and accept it thanks . — Ravindra S. Patil, Sep 09 '21 at 14:21
I'm sorry but even adding your headers I still get the XMLHttpRequest error — Diego jiménez, Sep 09 '21 at 14:41
Ok no problem , try my answer because it's working for me or just change your API call function same as my function in answer — Ravindra S. Patil, Sep 09 '21 at 15:09
I fixed it with a combination of your solution and this answer https://stackoverflow.com/questions/65630743/how-to-solve-flutter-web-api-cors-error-only-with-dart-code but not sure if I will get this in production. The domain names will be the same in production. — markhorrocks, Feb 25 '22 at 06:27

how can I solve XMLHttpRequest error with flutter?

1 Answers1

Linked