Question

我正在尝试动手操作。我尝试使用http包将我创建的简单Flutter Web应用程序连接到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;

}

Answer 1

我真的只是偶然发现了这个错误。您将与CORS发生冲突……如果您跟踪基础网络流量，则应该看到它首先发送了OPTIONS请求。

要使其暂时“正常运行”，您可以在关闭CORS的情况下启动Chrome。显然，这不是一个长期的解决方案，但是它可以帮助您前进。您需要的命令是：

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

Answer 2

我发现并解决了这个问题的

要访问flutter制作的网站，基本上是在调用JS脚本

对于任何要授予脚本访问权限的网站（在我的情况下，这是我正在从其访问api的另一个网站），您需要提供一定的访问权限

在这种情况下，这是 CORS-跨域资源共享

将以下代码添加到您的网站.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>

添加此现在将授予访问flutter网站的权限，以击中对api的请求

Answer 3

您还可以像下面这样将以下代码添加到您的php文件中：

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

我在LocalHost上进行了尝试，并且有效

如何向Flutter Web中发出HTTP请求

3 个答案: