Flutter web 中的 XMLHttpRequest 错误 [启用 CORS AWS API 网关] [英] XMLHttpRequest error in flutter web [Enabling CORS AWS API gateway]

问题描述

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

我试图从 Flutter Web 应用程序访问 API 端点，但每次出现错误时都会出现以下错误.

<块引用>

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

我知道这里有几个关于 SO 的问题(比如

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?

解决方案

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

return {状态代码:200，标题:{"Access-Control-Allow-Origin": "*",//需要 CORS 支持才能工作Access-Control-Allow-Credentials": true,//需要 cookie、带有 HTTPS 的授权标头Access-Control-Allow-Headers":Origin,Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token,locale",访问控制允许方法":POST，选项"},正文:JSON.stringify(item)};

Note: It turns out that this had nothing to do with flutter and everything to do with the fact that I had set the API gateway to a Lambda Proxy

I am trying to hit an API endpoint from a Flutter web application, every time it errors out and gives me the following error.

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

I know there are several questions here on SO(like this 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 instructions to enable CORS support from my API. Here are my CORS setting from the API gateway console.

The text in the "Access-Control-Allow-headers" is

'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token'

Enabling CORS on the API gateway didn't seem to help, I am still getting the same error on my flutter web app when I try to hit an API.

The funny thing is, the API work perfectly fine if I hit the API from chrome (i.e. pasting the API URL on the browser and hitting enter). It only fails when I try to hit the API from the flutter web app.

Question: How do I enable CORS support in my API gateway so my flutter web app can use the API ?

解决方案

this worked for me, I added the below header on the lambda function

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)
};

这篇关于Flutter web 中的 XMLHttpRequest 错误 [启用 CORS AWS API 网关]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！