英文:
Flutter Web blocked by CORS policy only affects desktop browsers and not Mobile Browsers
问题
我有一个Flutter Web应用，我试图访问存储在Firebase存储中的图像。当我尝试获取图像时，出现以下错误：
> XMLHttpRequest的访问地址'link-adress'被源' https://myDomain.app'阻止，因为CORS策略上没有'Access-Control-Allow-Origin'标头。
之后，我编辑了我的代码，添加了以下内容：
允许来源：如果["https://myDomain.app/*"];
允许方法：如果["GET"];
允许标头：如果[
"Authorization"，
"Content-Type"，
"x-firebase-storage-token"，
"x-firebase-storage-download-token"
];
非常奇怪的是，如果我从移动手机的Chrome或Firefox访问我的站点，图像会下载并正常工作，但是如果我尝试从桌面Chrome、Safari等访问，仍然会出现CORS错误。
英文:
I have a flutter web app that I am trying to access images stored in firebase storage. When I try to get to the image I get this error:
> Access to XMLHttpRequest at 'link-adress' from origin
> 'https://myDomain.app' has been blocked by CORS policy: No
> 'Access-Control-Allow-Origin' header is present on the requested
> resource.
After that I edited my code to add:
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"
];
What is super odd is that the images download and work if I visit my site on Chrome or Firefox from my mobile phone, but if I try from desktop Chrome, Safari etc. I get the cors error still.
答案1
得分: 3
这是Firebase Storage与桌面浏览器以CanvasKit渲染的Flutter应用程序的已知问题。您可能会找到一些建议切换您的Flutter渲染到HTML，但一个更好的解决方案是在Firebase Storage中启用CORS。
请参考Jens Becker在此帖子上的回答：
https://stackoverflow.com/questions/65653801/flutter-web-cant-load-network-image-from-another-domain
我按照Jens的指示解决了我的问题。
完整回答：
--
要能够在Flutter web页面上显示来自Firebase Storage的图像，您必须配置CORS的数据。
- 打开GCP控制台，选择您的项目，然后通过点击顶部导航栏中的>_图标按钮启动云终端会话。
- 单击打开编辑器按钮（铅笔图标），然后创建cors.json文件。
- 运行gsutil cors set cors.json gs://your-bucket
cors.json文件应如下所示：
[
{
"origin": ["*"],
"method": ["GET"],
"maxAgeSeconds": 3600
}
]
我将origin设置为*，这意味着每个网站都可以显示您的图像。但您也可以在那里插入您网站的域名以限制访问。
英文:
This is a known issue with Firebase Storage and desktop browsers where a Flutter app is rendering with CanvasKit. You may find some suggestions to switch your Flutter rendering to HTML, but a better solution is to enable CORS in your Firebase Storage.
Please see the answer by Jens Becker on this post:
https://stackoverflow.com/questions/65653801/flutter-web-cant-load-network-image-from-another-domain
I followed Jens' instructions and they resolved the issue for me.
Full answer:
--
For being able to display your images from Firebase Storage on a Flutter web page you have to configure your data for CORS.
- Open the GCP console, select your project and start a cloud terminal session by clicking the >_ icon button in the top navbar.
- Click the open editor button (pencil icon), then create the cors.json file.
- Run gsutil cors set cors.json gs://your-bucket
The cors.json file should look like this:
[
{
"origin": ["*"],
"method": ["GET"],
"maxAgeSeconds": 3600
}
]
I set the origin to * which means that every website can display your images. But you can also insert the domain of your website there to restrict the access.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论