Flutter Web中的XMLHttpRequest错误[启用CORS AWS API网关]答案

【问题标题】：XMLHttpRequest error in flutter web [Enabling CORS AWS API gateway]Flutter Web中的XMLHttpRequest错误[启用CORS AWS API网关]
【发布时间】：2020-05-28 04:59:51
【问题描述】：

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

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

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

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

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

'Content-Type,X-Amz-Date,Authorization,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？

【问题讨论】：

这解决了在 Flutter chrome 本地开发启动上运行时禁用网络安全的问题：stackoverflow.com/a/66879350/2747020

标签： flutter cors aws-api-gateway flutter-web

【解决方案1】：

在 cpanel 中启用 CORS 在您的主机帐户中启用 CORS。您可以在您的主机帐户的 .htaccess 文件中添加以下行来启用它。

<IfModule mod_headers. ...
Header set Access-Control-Allow-Origin "*"
</IfModule>

【讨论】：

【解决方案2】：

我在后端使用 Nodejs。当我从 Dio 发送一个 post 请求时，出现了这个错误：“XMLHttpRequest error.”。

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

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

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

npm i  cors

那么，开始使用吧……

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

只要这样做，您的错误就会得到解决。而且您无需再添加任何内容。

【讨论】：

【解决方案3】：

这对我有用，我在 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)
};

【讨论】：

请在我们需要的地方添加完整的代码 sn-p 到这个，客户端还是 API 端？如果是服务器端，我已经在我的 API 中添加了。 stackoverflow.com/q/61954922/998676
@RajaPeela 会将其添加到服务器响应中。
我添加了标题以响应我的 lambda 函数，但它没有帮助。

【解决方案4】：

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

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

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

另请参阅：How to Enable CORS in Apache and Nginx?

【讨论】：