如何向 In Flutter Web 发出 HTTP 请求

Question

我正在尝试 flutter web。我尝试使用 http 包将我创建的一个简单的 flutter web 应用程序连接到 mysql 数据库和本地主机。但是我没有从请求方法返回任何数据。当我试图打印出 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 请求。

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

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

Answer 2

您还可以将下面的代码添加到您的 php 文件中，如下所示：

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

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

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

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

app.use(cors())

查看 CORS package on npmjs

Answer 3

我发现并解决的问题是

访问一个flutter制作的网站基本上就是调用一个JS脚本

对于任何允许访问脚本的网站（在我的例子中是我访问 api 的另一个网站），您需要提供某种许可才能访问

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

将以下代码添加到您的网站.htaccess文件

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

添加此 现在将授予对您的 flutter 网站的访问权限，以点击对您的 apis

的请求

如何向 In Flutter Web 发出 HTTP 请求

How to make HTTP request to In Flutter Web

dart

flutter

flutter-web