如何解决Web Flutter出现ClientException: XMLHttpRequest error的问题

问题描述 投票:0回答:1

当我尝试使用 Web 导航器通过 http.post 发送数据时遇到问题,始终返回错误: ClientException:XMLHttpRequest错误...当然使用flutter

代码是:

String dataurl = "https://www.portalcri.com.br/st10sports/admin/webserver2/cadastro_campeonatos.php";
    var map =  <String, dynamic>{};
    map['modo'] = 'pesquisar';
    map['status2'] = '';

    var result = await http.post ( Uri.parse(dataurl), body: map, headers: {"Accept":"application/json"});
    if (result.statusCode == 200) {
      print (result.body);

      final data = jsonDecode(result.body);

      print (data);

      for (dynamic item in data) {
        setState(() {
          listaItens.add(TabelaCampeonatos.fromJson(item));
        });
      }

      setState(() {
        carregandoItens = false;
        semRegistros = false;
      });
    }

php 后端代码已经有了标头:

真正的解决方案似乎不存在,有人可以帮助我。 请记住,这在 2 天前还有效。

php flutter http post
1个回答
0
投票

您遇到的错误与跨域资源共享 (CORS) 有关,这是一种安全功能,可限制从其他域请求网页上的资源的方式。当您的 Flutter 应用尝试向不同域发出请求时,浏览器会阻止该请求,因为它违反了同源策略。

调试解决方案

出于调试目的,您可以在 Chrome 中禁用同源策略。这将允许您从 Flutter 应用程序向不同的域发出请求。具体方法如下:

  1. 打开终端。
  2. 导航到您的 Flutter 项目的目录。
  3. 运行以下命令:
flutter run -d chrome --web-browser-flag "--disable-web-security"

这将在 Chrome 中启动您的 Flutter 应用程序,并禁用同源策略。

请注意,这是一种调试解决方法,不应在生产环境中使用。同源策略是一项安全功能,可防止一个页面上的恶意脚本获取对另一个网页上敏感数据的访问权限。禁用它可能会使您的应用程序面临安全风险。

生产解决方案

最好的解决方案是配置服务器以在其响应中包含必要的 CORS 标头。这告诉浏览器可以从不同的域向该服务器发出请求。服务器应在其响应中包含

Access-Control-Allow-Origin
标头,并将值设置为 Flutter 应用程序的域。

以下是如何在 Node.js 服务器中进行设置的示例:

const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors());

// Your routes here

app.listen(3000, () => console.log('Server running on port 3000'));

在此示例中,

cors
中间件用于自动在所有响应中包含必要的 CORS 标头。

但是,如果您无法控制服务器的配置,则可以使用代理来添加必要的标头。这是一种解决方法,不应在生产中使用。对于生产,应配置服务器以包含必要的标头。

有多种在线服务可以充当 CORS 代理,例如 cors.sh。您可以通过将服务的 URL 添加到 API 请求的 URL 前面来使用这些服务。例如:

String dataurl = "https://cors.sh/?https://www.portalcri.com.br/st10sports/admin/webserver2/cadastro_campeonatos.php";

这将通过 cors.sh 代理向 API 发出请求,该代理会将必要的 CORS 标头添加到响应中。

请注意,使用 CORS 代理可能会将您的数据暴露给代理提供商,因此不建议将其用于敏感数据。

来源:

© www.soinside.com 2019 - 2024. All rights reserved.