Flutter Web：我在 API 调用中收到 XMLHttpRequest 错误

Question

我正在使用 Flutter web 开发一个简单的项目。当我在后端尝试任何 API 调用时，我收到类似“错误：XMLHttpRequest 错误”的错误。 我做了一些研究，发现它与CORS有关。

这是我的 PHP 代码的最终版本。

<?php

header("access-control-allow-origin: *");

require_once("connect.php");
$result = $db->query("SELECT * FROM feedback ORDER BY id DESC") -> fetchAll();

echo json_encode($result);  

?>

我用于调用 API 的 Flutter 代码

List? feedbackList;

  getFeedbacks() async {
    var url = Uri.parse('myDomainUrl/get.php');
    var response = await http.get(url);
    print('RESPONSE REPONSE RESPONSE RESPONSE: ${response.statusCode}');

    if (response.statusCode == 200) {
      setState(() {
        feedbackList = json.decode(response.body);
      });
      return feedbackList;
    }
  }

它可以在移动设备上运行，但不知何故我在网络上仍然遇到同样的错误。

Answer 1

尝试将此行添加到后端响应的标题中

<?php

header('access-control-allow-origin: *');
header('Access-Control-Allow-Headers: *');
...

?>

Answer 2

CORS 是浏览器独有的问题，而不是移动应用程序。这就是它在移动设备上运行良好的原因。查看this answer 或许可以解决您在 PHP 中的 CORS 问题。

如果你不能解决它，你可以使用html renderer而不是画布工具包来构建你的网络应用程序。