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

Question

我正在开发一个 flutter web 应用程序，当我运行它在调试模式（本地主机）下工作时，它非常有用，我的 firestore 请求工作和存储 urls，但是当我将它部署到 Firebase Hosting 时，我无法使用存储中的 url 加载图片。这是我得到的：

Access to fetch at 'https://firebasestorage.googleapis.com/v0/b/url-to-my-picture/?token=firestorage-key' from origin 'https://my-project.web.app' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

我搜索了这个，发现我需要在 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,
),
...

Answer 1

在遵循 set-up 到 google shell 之后，它现在可以正常工作了！

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

Flutter web with Firebase Hosting can not load pictures from storage

firebase

firebase-hosting

flutter

flutter-web