带有 Firebase 托管的 Flutter web 无法从存储中加载图片

Posted 2023-02-23

【中文标题】带有 Firebase 托管的 Flutter web 无法从存储中加载图片

【英文标题】：Flutter web with Firebase Hosting can not load pictures from storage

【发布时间】：2020-12-07 02:23:17

【问题描述】：

我正在开发一个 Flutter Web 应用程序，当我在调试模式（本地主机）上运行它时，它就像一个魅力，我的 Firestore 请求和存储 URL 也可以工作，但是当我将它部署到 Firebase 托管时，我可以'不要使用存储中的 url 加载图片。这是我得到的：

访问获取 'https://firebasestorage.googleapis.com/v0/b/url-to-my-picture/?token=firestorage-key' 来自原点“https://my-project.web.app”已被 CORS 阻止 政策：没有“Access-Control-Allow-Origin”标头出现在 请求的资源。如果不透明的响应满足您的需求，请将 请求模式为“no-cors”以获取禁用 CORS 的资源。

我搜索了这个，我发现我需要在 firebase.json 文件上设置我的托管，这就是我在托管部分所做的：

  "hosting": 
    "public": "build/web",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      
        "source": "**",
        "destination": "/index.html"
      
    ],
    "headers": [
      
        "source": "**",
        "headers": [
          
            "key": "Access-Control-Allow-Origin",
            "value": "*"
          
        ]
      
    ]
  ,

但没有成功。请注意，我只使用 Flutter Web 和 Firebase 本身。没有 NodeJs，没有 php。

编辑： 这是我加载图片的方式：

...
NetworkImage(
    pic.url,
),
...

【参考方案1】：

通过 google shell 进行设置后，它现在可以工作了！

https://***.com/a/58613527/11231634