Flutter web 中的 XMLHttpRequest 错误 [启用 CORS AWS API 网关]

Question

注意：事实证明，这与颤振无关，而与我将 API 网关设置为 Lambda 代理这一事实有关

我试图从 Flutter Web 应用程序访问 API 端点，每次它出错并给我以下错误。

获取传感器数据时出错：DioError [DioErrorType.RESPONSE]：XMLHttpRequest 错误。

我知道这里有几个关于 SO（像这个和这个）的问题在讨论这个问题，解决方案似乎是在服务器端启用 CORS 支持。我正在使用 AWS API 网关来构建 API，我按照这些说明从我的 API 启用 CORS 支持。这是我在 API 网关控制台中的 CORS 设置。

“Access-Control-Allow-headers”中的文本是

'内容类型，X-Amz-日期，授权，X-Api-Key，X-Amz-Security-Token'

在 API 网关上启用 CORS 似乎没有帮助，当我尝试点击 API 时，我的 flutter Web 应用程序仍然遇到相同的错误。

有趣的是，如果我从 chrome 中点击 API（即在浏览器上粘贴 API URL 并点击回车），API 工作得非常好。只有当我尝试从 Flutter Web 应用程序访问 API 时它才会失败。

问题：如何在我的 API 网关中启用 CORS 支持，以便我的 Flutter Web 应用程序可以使用 API？

Answer 1

这对我有用，我在 lambda 函数上添加了以下标题

return {
    statusCode: 200,
     headers: {
  "Access-Control-Allow-Origin": "*", // Required for CORS support to work
  "Access-Control-Allow-Credentials": true, // Required for cookies, authorization headers with HTTPS
  "Access-Control-Allow-Headers": "Origin,Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token,locale",
  "Access-Control-Allow-Methods": "POST, OPTIONS"
},
    body: JSON.stringify(item)
};

Answer 2

尝试

• 转到 flutter\bin\cache 并删除 flutter_tools.stamp 文件

• 转到 flutter\packages\flutter_tools\lib\src\web 打开文件 chrome.dart 并编辑它 在 '--disable-extensions' 行旁边添加 '--disable-web-security'

Answer 3

我使用 Nodejs 作为我的后端。当我从 Dio 发送 post 请求时出现此错误：“XMLHttpRequest 错误。”。

此错误背后的原因：假设您的 flutter 运行在 localhost:5500 上，nodejs 服务器运行在 localhost:3000 上。因此，您的浏览器无法处理请求，因为它们在不同的端口上运行。那就是我们使用CORS或者Proxies来解决这些问题。

请记住，这主要与您的浏览器有关。如果您将使用邮递员并发送相同的请求，您会发现一切正常。

为了解决这个问题：我安装了一个名为 CORS 的 NPM 包。

npm i  cors

然后，开始使用它......

const cors = require("cors");
app.use(cors());

只要这样做，您的错误就会得到解决。并且您不需要添加任何其他内容。

Answer 4

我的服务器使用的是 nginx，因此我通过将以下两行添加到 API 服务器的启用站点的配置文件的服务器块中解决了问题：

add_header Access-Control-Allow-Origin "*";
add_header Access-Control-Allow-Methods "GET, HEAD";

我的应用程序仅使用GET，HEAD因此您可能需要根据您的情况添加其他方法。

另请参阅：如何在 Apache 和 Nginx 中启用 CORS？