web-dev-qa-db-ja.com

In Flutter WebにHTTPリクエストを行う方法

フラッターウェブを試してみました。作成したシンプルなフラッターWebアプリを、httpパッケージを使用してmysqlデータベースとlocalhostに接続しようとしました。ただし、リクエストメソッドからデータが返されません。 _snaphot.error_を印刷しようとすると、_XMLHttpRequest error_になります。このメソッドは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

私は文字通り自分でエラーを見つけました。 CORSの危険にさらされています...基になるネットワークトラフィックをトレースすると、最初にOPTIONSリクエストを送信することがわかります。

一時的に「機能」させるには、CORSをオフにしてChrome=を起動します。明らかに、これは長期的な解決策ではありませんが、うまくいくはずです。必要なコマンドは次のとおりです。

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

次のコードを次のようにphpファイルに追加することもできます。

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

私はこれをLocalHostで試してみましたが、うまくいきました

1
Norbert

私が見つけて問題を解決したのは

Flutterで作成されたWebサイトにアクセスするには、基本的にJSスクリプトを呼び出します

スクリプトへのアクセスを許可するWebサイト（私の場合、私はからAPIにアクセスしていた別のWebサイトでした）には、アクセスするための何らかの許可を与える必要があります。

この場合はCORS-クロスオリジンリソースシェアリングです。

以下のコードをWebサイトに追加します.htaccessファイル

<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>

これを追加APIへのリクエストをヒットするためにフラッターWebサイトへのアクセスを許可します

0
Vicky Salunkhe