Firebase Storage Downloading Image CORS error [JavaScript]

Question

When I run the code below, I got CORS error and any help would be greatly appreciated. Thanks I tried a few answers in this topic here in StackOverflow but nothing helped me.

// Your web app's Firebase configuration
var firebaseConfig = {
    apiKey: "**********",
    authDomain: "********",
    databaseURL: "********",
    projectId: "********",
    storageBucket: "********",
    messagingSenderId: "********",
    appId: "********",
    measurementId: "********"
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

var storage = firebase.storage();
var storageRef = storage.ref('image');
var starRef = storageRef.child('image1.jpg');

starRef.getDownloadURL().then(url => {
    console.log(url);
})

---

Answer 1

Your calls to Firebase should be done server-side. Your server acts as a kind of pass-through. 2 reasons:

1. The browser prevents you from getting data from any server but your own
2. In order to call Firebase from the client side you have to have your credentials on the client side, which is seriously risky.

So from the client side call /images/image1.jpg

And from the server call Firebase and send the image1 back to the browser.

It's a lot of work, but that's the right way.