注意:事实证明,这与flutter无关,而是因为我将API网关设置为Lambda代理
我试图从Flutter Web应用程序中命中一个API端点,每次它都会出错,并给我以下错误。
获取传感器数据时出错:DioError [DioError类型.响应]:XMLHttpRequest错误。
我知道这里有一些关于SO的问题(如this和this)讨论这个问题,解决方案似乎是在服务器端启用CORS支持。我正在使用AWS API网关构建API,我按照这些说明从我的API启用CORS支持。以下是我从API网关控制台进行的CORS设置。
“Access-Control-Allow-headers”中的文本为
'内容类型,X-Amz日期,授权,X-Api密钥,X-Amz安全令牌'
在API网关上启用CORS似乎没有帮助,当我尝试点击API时,我仍然在我的flutter Web应用程序上遇到相同的错误。
有趣的是,如果我从chrome点击API(即在浏览器上粘贴API URL并按Enter键),API工作得很好。只有当我试图从flutter Web应用点击API时,它才会失败。
问题:如何在API网关中启用CORS支持,以便flutter Web应用程序可以使用API?
9条答案
按热度按时间aiazj4mn1#
这对我很有效,我在lambda函数上添加了下面的标题
ruoxqz4g2#
我的服务器使用的是nginx,因此我通过在API服务器的启用站点的配置文件的服务器块中添加以下两行代码来解决这个问题:
我的应用程序只使用
GET
和HEAD
,因此您可能需要根据您的情况添加其他方法。另请参阅:How to Enable CORS in Apache and Nginx?
lfapxunr3#
我使用Nodejs作为我的后端。当我从Dio发送一个post请求时,出现了这个错误:“XMLHttpRequest错误。"。
**出现此错误的原因:**假设您的flutter运行在localhost:5500和localhost:3000上的nodejs服务器上。因此,您的浏览器无法处理请求,因为它们运行在不同的端口上。这就是我们使用CORS或代理来解决这些问题。
记住,这是一个主要与您的浏览器有关的问题。如果您将使用postman并发送相同的请求,您会发现一切都在工作。
**为了解决这个问题:**我安装了一个名为CORS的NPM包。
然后,开始使用它....
只要这样做,你的错误就会得到解决,而且你不需要再添加任何东西。
vhmi4jdf4#
在cpanel中启用CORS以在您的主机帐户中启用CORS。您可以在主机帐户的**.htaccess**文件中添加以下行来启用它。
dgenwo3n5#
这是后端和前端都存在的问题,特别是当你需要添加一个认证头时。你需要做两件事。在你的后端允许cors,在你的前端指定你的发送json。
前端
后端
vfh0ocws6#
如果你没有访问服务器端的权限,最好设置一个反向代理。我使用了一个最小配置的nginx代理,运行在一个docker容器中。
docker-compose.yml:
nginx.conf:
然后,您可以使用http://localhost:3000作为API基础进行开发,nginx将发送请求到原始地址和端口。
cbwuti447#
使用这些步骤解决了问题....在我的案例中:
我在后台使用Nodejs。当我从HTTP发送一个post请求时,出现了这个错误:“XMLHttpRequest错误"。
1):在节点依赖项link中安装此组件
npm安装代码
第2步:代码行x1c 0d1x
步骤3然后通过执行步骤
添加获取IP
步骤4添加应用程序/android studio
blpfk2vs8#
这对我很有效:
安装cors后,对其进行定义
添加中间件以启用cors
dpiehjr49#
忘记使用https端点
在这个“XMLHttpRequest错误”上花了3个小时...
对于许多开发人员来说,这可能是显而易见的,但在我的情况下,我是从https向http端点发出CORS请求。
如果您想让它工作,除了其他答案(启用CORS、允许原点 *、向请求添加标题),拥有https端点至关重要。
完整的代码是什么使它工作(使用nginx,节点快递服务器和flutter网站):
服务器
恩金斯
在nginx配置文件
/etc/nginx/sites-available/mywebsite.com
中,在location
中添加以下行:后端
(you需要安装cors:后端目录中的
npm install cors
)Flutter客户端应用程序:
注意:端点有自订路径
因此,在将证书和https添加到后端后,它终于工作了。