如何解决 flutter 的 XMLHttpRequest 错误？

Question

使用 http 库获取 url 时出错：

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');
  }
}

错误：XMLHttpRequest 错误。

Answer 1

不幸的是，我在Web Flutter中开发了该应用程序，我发现错误取决于调用API时发生的XMLHttpRequest。我尝试找到一种必须运行 flutter run -d chrome --web-browser-flag "--disable-web-security" 的方法，但这不是解决方案，并且在发行版中不起作用。将 CORS 添加到标头也不起作用。

所以API调用时XMLHttpRequest错误返回空响应体，Web Flutter端存在这个问题。

此链接对您一定有用，已检查是否已修复错误 https://www.youtube.com/watch?v=H-q-_0oGOzg

如果您找到了最好的方法，请分享给我，祝您好运

Answer 2

尝试下面的代码我认为您的问题已经解决并且对您有帮助。我已在列表中显示您的数据。我还为 XML 请求设置了 CORS 请检查它

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();
                },
              ),
            ),
          ),
        ],
      ),
    );
  }
} 

您的结果屏幕 ->