web-dev-qa-db-fra.com

Comment faire une requête HTTP à In Flutter Web

J'essayais mes mains sur le Web flottant. J'ai essayé de connecter une simple application Web Flutter que j'ai créée à la base de données mysql et à localhost à l'aide du package http. Cependant, je ne reçois aucune donnée renvoyée par la méthode de demande. Lorsque j'ai essayé d'imprimer snaphot.error, J'ai obtenu ceci: XMLHttpRequest error. J'ai cette méthode dans une FutureBuilder()

getMethod()async{
  String theUrl = 'https://localhost/fetchData.php';
  var res = await http.get(Uri.encodeFull(theUrl),headers: {"Accept":"application/json"});
  var responsBody = json.decode(res.body);
  print(responsBody);
  return responsBody;

}
dartflutterflutter-web
6
Norbert

Je suis littéralement tombé sur l'erreur moi-même. Vous ne respectez pas CORS ... si vous tracez le trafic réseau sous-jacent, vous devriez voir qu'il envoie d'abord une demande OPTIONS.

Pour le faire fonctionner temporairement, vous pouvez lancer Chrome avec CORS désactivé. Évidemment, ce n'est pas une solution à long terme, mais cela devrait vous permettre de démarrer. La commande dont vous avez besoin est:

open /Applications/Google\ Chrome.app --args --disable-web-security --user-data-dir
1
Craig Edwards

Vous pouvez également ajouter le code ci-dessous à votre fichier php comme ceci:

<?php
require('connection.php');
header("Access-Control-Allow-Origin: *");
....
code goes here
....
?>

J'ai essayé cela sur LocalHost et cela a fonctionné

1
Norbert

Ce que j'ai découvert et résolu le problème est

Pour accéder à un site Web créé par flutter, vous appelez un script JS

et pour que tout site Web donne accès à un script (qui, dans mon cas, était un autre site Web à partir duquel j'accédais à l'api), vous devez donner une sorte d'autorisation d'accès

Ce qui est dans ce cas est CORS - Cross-Origin Resource Sharing

Ajoutez le code ci-dessous à vos sites Web .htaccess fichier

<ifModule mod_headers.c>
    SetEnvIf Origin "http(s)?://(www.)?(localhost:55538|somedomain.com)$" AccessControlAllowOrigin=$0
    Header add Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin
    Header always set Access-Control-Allow-Methods: "GET,POST,PUT,DELETE,OPTIONS"
</ifModule>

l'ajout de cela accordera désormais l'accès à votre site Web Flutter pour frapper les demandes à vos API

0
Vicky Salunkhe