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

4 minutos de lectura

avatar de usuario
Darpit Patel

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

  • tengo el mismo problema tienes alguna solucion?

    – Carlos Abajo

    13 de febrero de 2021 a las 23:20

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.

  • Es muy probable que este sea el problema, ya que muchos otros con este error lo resolvieron agregando CORS a su encabezado de solicitud. No capté el tipo como tú.

    – JaredBaszler

    26 oct 2020 a las 19:58

  • ¿En qué parte de mi archivo tengo que poner el código?

    – Berlín

    24 de enero de 2021 a las 14:13

  • @Berl su parte de encabezado, donde defines Content-type

    –Jubin Patel

    25 de enero de 2021 a las 5:07


  • Sí, ¡pero necesito enviar encabezados con mi solicitud de publicación!

    – Taleb

    22 de diciembre de 2021 a las 16:39

avatar de usuario
mioch

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

avatar de usuario
jaredbaszler

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

        }));

  • cuál es la solución ?

    – mohamed elyamani

    29 de marzo de 2021 a las 12:46

  • Actualicé la publicación con la configuración de mi servicio usando .net core. Su servicio puede ser diferente. Básicamente permite CORS para el desarrollo.

    –Marty Spallone

    30 de marzo de 2021 a las 15:11

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad