在进行 HTTP 调用时，Flutter Web 出现“XMLHttpRequest”错误答案

【问题标题】：IN Flutter Web getting 'XMLHttpRequest' error while making HTTP call在进行 HTTP 调用时，Flutter Web 出现“XMLHttpRequest”错误
【发布时间】：2021-02-04 01:55:57
【问题描述】：

我正在使用 XAMPP 控制面板并使用 Apache 端口号 80 之类的本地服务器，但在 Flutter Web 中出现 XMLHttpRequest 错误和在移动设备中。相同的编码使用 API 获取数据，不会出现任何错误。应用在 Flutter-web 上运行时如何使用 API 获取数据？

错误

Launching lib\main.dart on Chrome in debug mode...
Syncing files to device Chrome...
Debug service listening on ws://127.0.0.1:56619/FsXy3a4ZrZg=
Debug service listening on ws://127.0.0.1:56619/FsXy3a4ZrZg=
Error: XMLHttpRequest error.
    C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/patch/core_patch.dart 906:28                get current
packages/http/src/browser_client.dart 84:22                                                                                    <fn>
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/zone.dart 1450:54                                              runUnary
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/future_impl.dart 143:18                                        handleValue
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/future_impl.dart 696:44                                        handleValueCallback
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/future_impl.dart 725:32                                        _propagateToListeners
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/future_impl.dart 519:7                                         [_complete]
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/stream_pipe.dart 61:11                                         _cancelAndValue
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/stream.dart 1302:7                                             <fn>
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 324:14  _checkAndCall
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 329:39  dcall
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/html/dart2js/html_dart2js.dart 37312:58                              <fn>
    
    at Object.createErrorWithStack (http://localhost:5555/dart_sdk.js:4361:12)
    at Object._rethrow (http://localhost:5555/dart_sdk.js:38189:16)
    at async._AsyncCallbackEntry.new.callback (http://localhost:5555/dart_sdk.js:38183:13)
    at Object._microtaskLoop (http://localhost:5555/dart_sdk.js:38015:13)
    at _startMicrotaskLoop (http://localhost:5555/dart_sdk.js:38021:13)
    at http://localhost:5555/dart_sdk.js:33518:9

后端 PHP Web 服务

<?php

header("Access-Control_Allow_Origin: *");
header("Access-Control-Allow-Credentials: true");
header("Content-type:application/json;charset=utf-8"); 
header("Access-Control-Allow-Methods: GET");

include 'config.php';

$sql="select * from calinsert";
$result=mysqli_query($conn,$sql)or die("query failed");

if(mysqli_num_rows($result) >0){
    $output=mysqli_fetch_all($result,MYSQLI_ASSOC);
    echo json_encode($output);
}
else{   
    echo json_encode(array('message'=>'no record found','status'=>false));
}
?>

Flutter 端代码

Future getdata()async {
    final response = await http.get(
        'http://localhost:80/web_service/calview.php',
        headers: {
          "Accept": "application/json",
          "Access-Control_Allow_Origin": "*"
        });

    print(response.statusCode);
    print(response.body);
  }

【问题讨论】：

我也有同样的问题你有解决办法吗？

标签： php flutter flutter-web

【解决方案1】：

我最近也遇到了这个错误，我似乎已经通过将我的包升级到最新的 0.12.2 版本来修复它，它似乎已经帮助了 - 到目前为止。

https://pub.dev/packages/http

【讨论】：

@DarpitPatel - 您是否检查了浏览器控制台以查看是否有任何更具体的错误可能有助于确定根本原因？ github.com/dart-lang/http/issues/433
此问题仅适用于 Web 应用程序还是移动应用程序部署也有问题？
@JubinPatel 是的，它只在颤振网络应用程序上
你找到解决办法了吗？

【解决方案2】：

在大多数使用 Flutter API 的情况下，在 header 中添加 Access-Control-Allow-Origin 值可能会解决问题。（注意：这将有助于访问本地或外部 API）

header("Access-Control-Allow-Origin: *");

提示：您上面的标题中有错字，请检查并更正。

【讨论】：

这很可能是问题所在，因为许多其他有此错误的人通过将 CORS 添加到他们的请求标头中解决了这个问题。我没有像你那样抓住类型。
我必须在文件中的什么位置放置代码？
@Berl 它的标题部分，您在其中定义 Content-type

【解决方案3】：

谢谢！ F12 工具 -> 从源“http://localhost:52273”访问“https://localhost:44360/xxyy”处的 XMLHttpRequest 已被 CORS 策略阻止：不存在“Access-Control-Allow-Origin”标头在请求的资源上。

更多信息 - CORS 通常是服务器端问题，您必须设置允许的客户端。出于开发目的，我的 Flutter Web 正在与 .net 核心服务通信，因此我必须在开发模式下启用 CORS，仅允许 CORS 使用以下内容：

builder
                .AllowAnyOrigin()
                .WithHeaders(HeaderNames.AccessControlAllowHeaders, "Content-Type")
                .AllowAnyMethod();

        }));

【讨论】：

解决办法是什么？
我使用 .net 核心更新了我的服务配置的帖子。您的服务可能会有所不同。基本上允许CORS进行开发。

【解决方案4】：

修正错字（用破折号代替下划线）：
```
 header("Access-Control-Allow-Origin: *");
```

在您的 php 代码中添加以下标头：

header("Access-Control-Allow-Headers": "Access-Control-Allow-Origin, Accept");

【讨论】：

【解决方案5】：

刚刚从 post 方法中删除了 header 属性，它对我有用。

【讨论】：

是的，但是我需要在我的帖子请求中发送标头！！！

【解决方案6】：

我的 Appwrite 服务器出现了问题。我只需将 localhost 添加为受信任的 Web 应用程序，它就可以毫无问题地开始工作。

【讨论】：

你能解释一下你是怎么做到的吗？

【解决方案7】：

1- 转到flutter\bin\cache 并删除一个名为：flutter_tools.stamp 的文件

2- 转到flutter\packages\flutter_tools\lib\src\web 并打开文件chrome.dart。

3- 查找'--disable-extensions'

4- 添加'--disable-web-security'

【讨论】：