Netlify部署的React应用上传Firebase Storage遇storage/unknown错误

场景 #

我需要将图片上传至Firebase Storage，但部署在Netlify上的React应用点击上传按钮时出现404错误，本地运行则完全正常。

Firebase配置文件（环境变量已在Netlify中设置） #

import { initializeApp } from "firebase/app";
import { getStorage } from "firebase/storage"

const firebaseConfig = {
    apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
    authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
    projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
    storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
    appId: process.env.REACT_APP_FIREBASE_APP_ID
};

const app = initializeApp(firebaseConfig);
export const storage = getStorage(app)

图片上传代码 #

import { storage } from '../../firebase';
import { ref, uploadBytes, getDownloadURL } from "firebase/storage"

const uploadToFirebase = async (newPost) => {
        if (postImage == null) return;
        const imageRef = ref(storage, `images/${postImage.name + v4()}`)

        await uploadBytes(imageRef, postImage)
        const url = await getDownloadURL(imageRef)
        newPost.post.image = url
    }

错误信息 #

请求返回404：

POST https://firebasestorage.googleapis.com/v0/b/***/o?name=images%2FScreenshot%20(5).pngfc61b7f6-da0d-40f3-a3e5-864e27810503 404

控制台报错：

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

错误负载显示404未找到。

Firebase Storage规则 #

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

补充说明 #

• 代码在本地运行正常
• 曾怀疑是环境变量问题，尝试硬编码配置后问题仍存在

解决思路及方案 #

1. 核对Storage Bucket名称 #

再仔细检查Firebase控制台里的Storage Bucket全称（格式一般为[项目ID].appspot.com），确保硬编码或环境变量里的值完全一致，没有拼写错误、隐形空格或字符遗漏。

2. 修复文件路径拼接问题 #

从错误URL能看到，文件名和UUID直接连在一起（Screenshot%20(5).pngfc61b7f6-da0d-40f3-a3e5-864e27810503），这种格式可能导致Storage解析路径失败。修改上传代码的路径拼接逻辑：

// 给文件名和UUID加分隔符，或者重新生成规范文件名
const ext = postImage.name.split('.').pop();
const fileName = `${v4()}.${ext}`;
const imageRef = ref(storage, `images/${fileName}`);

3. 验证Netlify环境变量注入 #

查看Netlify的构建日志，搜索REACT_APP_FIREBASE_STORAGE_BUCKET，确认构建时变量值已正确注入，没有为空或出现异常值。

4. 检查Firebase Storage状态 #

登录Firebase控制台，确认Storage服务已启用，目标Bucket处于正常状态，没有被暂停或删除。

5. 配置CORS规则 #

Netlify部署的域名可能不在Firebase的CORS允许列表中，按以下步骤配置：

1. 安装Firebase CLI并登录账号
2. 在项目根目录创建cors.json文件：

[
  {
    "origin": ["https://你的Netlify域名.netlify.app"],
    "method": ["POST", "GET"],
    "maxAgeSeconds": 3600
  }
]

3. 执行命令上传配置：

firebase storage:rules:upload cors.json

内容的提问来源于stack exchange，提问作者Syko