此问题已在此处有答案:
Flutter web can't load network image from another domain(14个答案)
昨天关门了。
我有一个Flutter Web应用程序,我试图访问存储在FireBase存储中的图像。当我试图得到图像时,我得到了这个错误:
CORS策略已阻止从源“https://www.example.com”访问“link-adress”处的XMLHttpRequestmyDomain.app:请求的资源上不存在“Access-Control-Allow-Origin”标头。
之后,我编辑了我的代码来添加:
allow origin: if ["https://myDomain.app/*"];
allow method: if ["GET"];
allow headers: if[
"Authorization",
"Content-Type",
"x-firebase-storage-token",
"x-firebase-storage-download-token"
];
什么是超级奇怪的是,如果我访问我的网站在Chrome或Firefox从我移动的,但如果我尝试从桌面Chrome,Safari等。我仍然得到cors错误。
1条答案
按热度按时间xytpbqjk1#
这是Firebase Storage和桌面浏览器的已知问题,Flutter应用程序使用CanvasKit进行渲染。您可能会发现一些将Flutter渲染切换到HTML的建议,但更好的解决方案是在Firebase Storage中启用CORS。
请看Jens Becker在这篇文章中的回答:Flutter web can't load network image from another domain
我听从了Jens的指示,他们为我解决了这个问题。
完整答案:
为了能够在Flutter网页上显示来自Firebase Storage的图像,您必须为CORS配置数据。
1.打开GCP控制台,选择您的项目,点击顶部导航栏中的>_图标按钮,启动云终端会话。
1.单击打开编辑器按钮(铅笔图标),然后创建cors.json文件。
1.运行gsutil cors set cors.json gs://your-bucket
cors.json文件应该看起来像这样:
我将origin设置为 *,这意味着每个网站都可以显示您的图像。但是你也可以在那里插入你的网站的域来限制访问。