i have a function on my Profile.js

and the idea is change the avatar of a user in firestore data//same logic when uploading image in the Singup process
But im getting
Access to XMLHttpRequest at ‘https://firebasestorage.googleapis.com/v0/b/login-d16b3.appspot.com/o?name=avatars%2FU2O2of0JJZtwZqsLVVuQ’ from origin ‘http://localhost:3000’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: It does not have HTTP ok status

The code :

const handleAvatarChange = async (event) => {

    if (currentUser && currentUser.id) {

      const file = event.target.files[0];

      if (file) {

        const storage = getStorage();

        const storageRef = ref(storage, `avatars/${currentUser.id}`);



        try {

          await uploadBytes(storageRef, file);

          const avatarURL = await getDownloadURL(storageRef);

          setAvatar(avatarURL);



          const db = getFirestore();

          const userDocRef = doc(db, 'users', currentUser.id);

          await updateDoc(userDocRef, { avatar: avatarURL });



          console.log("Avatar updated successfully:", avatarURL);

        } catch (error) {

          console.error("Error uploading avatar:", error);

        }

      }

    }

  };

I hope u help me to fix this cors issues.