如何向 In Flutter Web 发出 HTTP 请求

Question

我正在尝试使用 Flutter Web。我尝试使用 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

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

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

我在 LocalHost 上试过这个，它成功了。

注意：如果您使用的是 nodejs，请安装 cors() 包并使用类似

var express = require('express')
var app = express()
var cors = require('cors')

app.use(cors())

查看CORS package on npmjs

Answer 2

我自己只是偶然发现了这个错误。您正在与 CORS 发生冲突...如果您跟踪底层网络流量，您应该会看到它首先发送了一个 OPTIONS 请求。

要让它暂时“工作”，您可以在关闭 CORS 的情况下启动 Chrome。显然，这不是一个长期的解决方案，但它应该能让你继续前进。你需要的命令是：

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

Answer 3

我发现并解决了这个问题

访问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 的请求