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

Question

我正在使用 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));
}
?>

扑边代码

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

原文由 Darpit Patel 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

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

原文由 Jubin Patel 发布，翻译遵循 CC BY-SA 4.0 许可协议