如何直接上传文件至Web端Firebase Storage指定文件夹？

我已在Firebase Storage中创建了一个文件夹，尝试在storageBucket URL中添加文件夹名称后，出现跨域请求错误：Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at...(Reason: CORS preflight response did not succeed)。请问此场景下正确的storageBucket URL格式是什么？是否有其他可行方案？

用户提供的完整代码：

const firebaseConfig = {
    apiKey: "",
    authDomain: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: "",
    measurementId: ""
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);
console.log(firebase);

function uploadImage() {
   const ref = firebase.storage().ref();
   const file = document.querySelector("#foto").files[0];
   const name = +new Date() + "-" + file.name;
   const metadata = {
      contentType: file.type
   };
   const task = ref.child(name).put(file, metadata);
   task
   .then(snapshot => snapshot.ref.getDownloadURL())
   .then(url => {
      console.log(url);
      alert('SUKSES !');
      urlFoto.value=url;
   })
   .catch(console.error);
}

解答 #

1. 正确的storageBucket URL格式 #

storageBucket字段仅需填写Firebase分配的存储桶根地址，格式示例：your-project-id.appspot.com，绝对不能手动添加文件夹路径。文件夹的指定要通过代码中的ref.child()方法实现，而非修改配置项。

2. 跨域错误的解决 #

跨域错误并非来自storageBucket格式错误，而是Firebase Storage的CORS策略限制导致，需配置存储桶的CORS规则：

• 本地创建cors.json文件，内容如下：

[
  {
    "origin": ["*"],
    "method": ["GET", "POST", "PUT"],
    "maxAgeSeconds": 3600
  }
]

• 用Firebase CLI执行命令上传配置：

firebase storage:rules:upload cors.json

（若需更严格权限，可将"*"替换为你的网站域名）

3. 上传到指定文件夹的正确写法 #

如果要上传到你创建的目标文件夹，只需在ref.child()中拼接文件夹路径即可。比如文件夹名为user-uploads，修改代码如下：

// 替换原ref.child(name)行
const task = ref.child(`user-uploads/${name}`).put(file, metadata);

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