Firebase 存储：发生未知错误，请检查服务器响应的错误负载

Question

我正在尝试创建一个将文件上传到 Firebase Storage 的 Vue Composable。

为此，我使用模块化 Firebase 9 版本。

但是我当前的代码没有上传任何内容，而是返回此错误：

FirebaseError: Firebase Storage: An unknown error occurred, please check the error payload for server response. (storage/unknown)

因为这个错误已经来自我的

console.log("ERROR", err);

我不知道还能在哪里寻找解决方案。

我的代码是使用 TypeScript 实现的，以防万一。

import { projectStorage } from "@/firebase/config";
import { ref, watchEffect } from "vue";
import {
  ref as storageRef,
  uploadBytesResumable,
  UploadTaskSnapshot,
  UploadTask,
  getDownloadURL,
  StorageError,
} from "firebase/storage";

const useStorage: any = (file: File) => {
  const error = ref<StorageError | null>(null);
  const url = ref<string | null>(null);
  const progress = ref<number | null>(null);
  watchEffect(() => {
    // references
    const storageReference = storageRef(projectStorage, "images/" + file.name);
    // upload file
    const uploadTask: UploadTask = uploadBytesResumable(storageReference, file);
    // update progess bar as file uploads
    uploadTask.on(
      "state_changed",
      (snapshot: UploadTaskSnapshot) => {
        console.log("SNAPSHOT", snapshot);
      },
      (err) => {
        error.value = err;
        console.log("ERROR", err);
      },
      async () => {
        // get download URL & make firestore doc
        const downloadUrl = await getDownloadURL(storageReference);
        url.value = downloadUrl;
        console.log("DOWNLOADURL", downloadUrl);
      }
    );
  });
  return { progress, url, error };
};
export default useStorage;

Answer 1

首先转到“存储”、“规则”选项卡并更改“允许读取、写入：如果为 false”；为真；如下图所示。

rules_version = '2';
service firebase.storage {
    match /b/{bucket}/o {
        match /{allPaths=**} {
            allow read, write: if true;
    }
  }
}

Answer 2

控制台错误还不够。它没有提供足够的信息。

查看控制台错误时，您需要单击控制台中显示的另一个红色

POST 400

错误。这将带您进入“网络”选项卡。从那里向下滚动并单击令人讨厌的红色错误。这应该最终会向您显示一条更有用的错误消息，内容如下：

权限被拒绝。请访问 Firebase 控制台中的“存储”选项卡，为您的存储桶启用 Firebase 存储，并确保您有足够的权限来正确配置资源。

这可能会让您认为应该归咎于您的 Firebase 存储规则。在继续之前，您应该仔细检查这些规则，但更可能的问题是您在 Google Cloud Console 中缺少深奥的

[email protected]

权限。

要解决此问题，请执行以下步骤：

1. 前往 https://console.cloud.google.com
2. 在顶部蓝色栏中选择您的项目（您可能需要切换到“全部”选项卡才能查看您的 Firebase 项目）
3. 向下滚动左侧菜单并选择“云存储”
4. 选择您的所有存储桶，然后单击右上角的“权限”
5. 单击“添加主体”
6. 将“[email protected]”添加到“新原则”框中，并赋予其“存储管理员”角色并保存

这应该可以解决问题！

Answer 3

转到您的 Firebase 项目控制台，转到“存储”，然后转到“规则”，复制并粘贴以下内容：

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if true;
    }
    match /users/{userId}/{allPaths=**} {
      allow read: if true;
      allow write: if request.auth.uid == userId;
    }
  }
}

Answer 4

错误代码 400 显示在调试控制台中，并显示一条消息，指示您必须更新您的

rules_version = '2'

。 这样做就可以解决问题。

Answer 5

如果您只想允许登录用户写入 Firebase 存储，您可以使用以下命令：

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if request.auth != null;
    }
  }
}