IN Flutter Web obtiene el error ‘XMLHttpRequest’ al realizar una llamada HTTP

Estoy usando el panel de control XAMPP y usando un servidor local como el puerto Apache no 80, pero en flutter web obtengo el error XMLHttpRequest y en el dispositivo móvil. La misma codificación obtiene datos mediante la API sin obtener ningún error. ¿Cómo obtener datos usando la API mientras la aplicación se ejecuta en flutter-web?

Error

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

Servicio web PHP del lado del back-end

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

Código lateral de aleteo

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

En la mayoría de los casos de uso de la API de Flutter, agregue Access-Control-Allow-Origin el valor en el encabezado podría resolver el problema. (Nota: esto ayudará a acceder a las API locales o externas)

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

Sugerencia: tiene un error tipográfico en el encabezado anterior, verifíquelo y corríjalo.

1. Corrija el error tipográfico (reemplace los guiones bajos por guiones):

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

2. Agregue el siguiente encabezado en su código php:

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

Recientemente también recibí este error y parece que lo solucioné actualizando mi paquete al más reciente 0.12.2 versión y parece haber ayudado – hasta ahora.

https://pub.dev/packages/http

¡Gracias! Herramientas F12 -> El acceso a XMLHttpRequest en ‘https://localhost:44360/xxyy’ desde el origen ‘http://localhost:52273’ ha sido bloqueado por la política CORS: No hay encabezado ‘Access-Control-Allow-Origin’ presente sobre el recurso solicitado.

Más información: CORS suele ser un problema secundario, debe configurar qué clientes están permitidos. Para fines de desarrollo, mi flutter web se comunica con un servicio central de .net, por lo que tuve que habilitar CORS en el modo de desarrollo solo para permitir CORS usando lo siguiente:

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

        }));