首页 > 解决方案 > 在我的谷歌云函数代码中创建的图像 url 在我的网站上放入标签时返回 401?

问题描述

当图像上传到 Firebase 存储时,我正在使用云功能来调整它的大小。然后,我获取该图像的 URL 并将其插入 Firestore 数据库。当数据库记录更新时,前端应用程序会看到该更改并创建一个标签,并将 URL 设置为“src”。网络调用返回 401。

据我所知,我要么需要在 Google 管理面板中的某处将域列入白名单,要么一开始就收到错误的 URL。

当我在 Firebase 控制台中查看该文件时,我得到的 URL 与在云函数中收到的域不同。由于存储域不同,因此我需要设置一个白名单。如果是这样,它在哪里?

可以进行字符串替换,如果我进入数据库并手动更改域、路径的第一部分并添加alt=media参数,图像将加载。我希望有人有一个不那么老套的答案。

我将存储桶设置为允许阅读。

service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read;
    }
  }
}

我的云功能如下:https ://angularfirebase.com/lessons/image-thumbnail-resizer-cloud-function/ 。以下是重要部分:

import * as functions from 'firebase-functions'
import * as admin from 'firebase-admin'
admin.initializeApp();

export const imageResize = functions.storage
.object()
.onFinalize(async object => {
  const bucket = admin.storage().bucket(object.bucket)
  bucket.upload(imagePath, {
      destination: join(bucketDir, imageName)
    }).then(async (data) => {
      const file = data[0]
      const [imageLink] = await file.getSignedUrl({
        action: 'read',
        expires: '04-03-2100'
      })
      // also tried this
      // const [fileMeta] = await file.getMetadata()
      // const imageLink = fileMeta.selfLink

然后我将它写入正确的 Firestore DB 记录。写入工作正常,URL 不起作用。


预期我从 file.getSignedUrl() 获得的 URL 应该加载到图像标签中

实际URL 在图像标签中加载时返回 401。

标签: typescriptfirebasegoogle-cloud-firestoregoogle-cloud-functionsgoogle-cloud-storage

解决方案


您可以尝试此解决方案,该解决方案使用与通过将图像上传到存储触发的标准示例不同的模式。

你可以看看这个链接。

Firebase Cloud 功能在 Firestore 创建时调整图像大小


推荐阅读