AllAnimals AllAnimals - 9 months ago 33
Javascript Question

Angular $http.get with firebase

I am trying to access information from my firebase database using the $http service. This is my code:

$http.get("my firebase url").then(function(res) {
console.log(res);
});


But I am getting a cors error:
XMLHttpRequest cannot load https://console.firebase.google.com/project/... Redirect from 'https://console.firebase.google.com/project/...' to 'https://accounts.google.com/ServiceLogin?passive=44&osid=1&continue=ht…owup=https://console.firebase.google.com/project/.../database/data/' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

Ive tried googling the issue but I couldnt find anything that I understood.

Note: I am a firebase and angular noobie.

Answer Source

I hope this helps.

You will need 3 things to be considered. 1. On the URL use your FB domain not the console "Ex: https://YOUR_DOMAIN.firebaseio.com/.."
2. At the end, you will need to extend the url to .json "Ex: ../settings/app.json"
3. And you will need to use rules to allow the access:
Ex:

{
    "rules": {
        ".read": "auth != null",
        ".write": "auth != null",
        "settings": {
            "app": {
                ".read": true,
                ".write": false
            }
        }
    }
}

Then you can use your $http, as in my example:

$http.get("https://YOUR_DOMAIN.firebaseio.com/settings/app.json")

enter image description here

Example here : https://jsfiddle.net/moplin/1124204w/