如何用颤振解决 XMLHttpRequest 错误？答案

【问题标题】：how can I solve XMLHttpRequest error with flutter?如何用颤振解决 XMLHttpRequest 错误？
【发布时间】：2021-11-05 23:22:24
【问题描述】：

使用 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 错误。

【问题讨论】：

参考我的回答here希望对你有所帮助
感谢您的回答，但它不起作用，现在我收到 403 错误
403 表示禁止
但是我提供的链接是有效的......所以有什么问题？我更改了 Firebase 存储规则，以便每个人都可以访问。
好的，你想要这个列表数据在列表视图中吗？

标签： flutter http http-headers

【解决方案1】：

试试下面的代码我认为你的问题已经解决了，它对你有帮助。我已在列表中显示您的数据。我还为 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();
                },
              ),
            ),
          ),
        ],
      ),
    );
  }
}

您的结果屏幕 ->

【讨论】：

嗨拉文拉，感谢您的回答！很抱歉，为 XML 请求设置 CORS 是什么意思？
跨域资源共享 (CORS) 是一种基于 HTTP 标头的机制，它意味着通过特定响应标头向您的 Web 服务器请求特定位置
好的，如果它是一个包或其他东西，我必须下载 ir ？
无需安装任何软件包或其他东西，只需在标题部分设置与我的答案相同的 CORS，如果您的问题通过答案解决，请点赞并接受，谢谢。
很抱歉，即使添加了您的标头，我仍然收到 XMLHttpRequest 错误