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

Question

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

我正在尝试从 Flutter 网络应用程序访问 API 端点，但每次它出错时都会出现以下错误。

Error getting sensor data: DioError [DioErrorType.RESPONSE]: XMLHttpRequest error.

我知道这里有几个关于 SO 的问题（例如 and this) discussing this issue and the solution seems to be to enable CORS support on the server-side. I am using the AWS API gateway to build the API, I followed 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.[=15= 时，我的 flutter web 应用程序仍然出现相同的错误]

有趣的是，如果我从 chrome 中点击 API（即将 API URL 粘贴到浏览器并按回车）。只有当我尝试从 flutter 网络应用程序中点击 API 时才会失败。

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

Answer 1

这对我有用，我在 lambda 函数上添加了下面的 header

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

我的服务器使用的是 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?

Answer 3

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

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

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

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

npm i  cors

那么，开始使用吧....

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

只要这样做，您的错误就会得到解决。而且你不需要再添加任何东西。

Answer 4

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

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

Answer 5

这是您的后端和前端的问题，特别是如果您需要添加身份验证 header。你需要做两件事。在您的后端允许 cors 并指定您在前端发送 json。
前端

var request = await http.post(
        Uri.parse(url),
        headers: {
          "auth-token": idToken, // whatever headers you need
          "content-type": "application/json" // This preventes empty response body
        },
        body: jsonEncode(<String, String>{
          'name': name,
          'email': email,
        })

后端

const cors = require('cors');

app.use(cors({
    origin: '*',
    allowedHeaders: 'X-Requested-With, Content-Type, auth-token',
}));

app.use("/api/user", authRoute); // this is the endpoint yoou're calling with your Flutter Web frontend

Answer 6

如果您无法访问服务器端，最好设置一个反向代理。我使用了最低配置的 nginx 代理，运行在 docker 容器中。

docker-compose.yml:

version : '3'
services :
  nginx:
    image: nginx:latest
    container_name: nginx_container
    ports:
      - 3000:3000
    volumes:
      - ./nginx.conf:/etc/nginx/nginx.conf

nginx.conf:

events { 
}
http {
  server {
    listen 3000;
    location / {
       proxy_pass http://original_address_and_port/;
    }
  }
}

然后，您可以使用 http://本地主机:3000 作为API基础，nginx将发送请求做原始地址和端口。

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

XMLHttpRequest error in flutter web [Enabling CORS AWS API gateway]

cors

aws-api-gateway

flutter

flutter-web