IN Flutter Web 在进行 HTTP 调用时收到“XMLHttpRequest”错误

2022-08-30 16:44:00

我正在使用XAMPP控制面板并使用本地服务器,如Apache端口no 80,但在颤动网络中得到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 Webservice

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

颤振侧代码

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

答案 1

在 Flutter API 使用的大多数情况下,在标头中添加值可能会解决此问题。(注意:这将有助于访问本地或外部 API)Access-Control-Allow-Origin

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

提示:您在上面的标题中有拼写错误,请检查并更正。


答案 2

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

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

3-查找“--禁用扩展”

4-添加“--禁用-网络安全”


推荐