1

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.

I've tried googling the issue but I couldn't find anything that I understood.

Note: I am a firebase and angular noobie.

Pablo Palacios
  • 2,767
  • 20
  • 37
Jack Zavarella
  • 335
  • 1
  • 4
  • 13
  • 1
    Possible duplicate of ["No 'Access-Control-Allow-Origin' header is present on the requested resource"](http://stackoverflow.com/questions/20035101/no-access-control-allow-origin-header-is-present-on-the-requested-resource) – lin Mar 11 '17 at 17:06
  • I will check it out, but it doesnt appear to be using the angular $http service which I want to use. – Jack Zavarella Mar 11 '17 at 17:10
  • Its a general HTTP based "problem". It does match to all technologies which uses HTTP. – lin Mar 11 '17 at 17:13
  • 1
    From the error message it seems like you're trying to read data from the Firebase Console. That won't work. If you want to read data from your database, make sure that `my firebase url` is of the format `https://yours.firebaseio.com/`, which you can copy from your [Firebase Database console](https://console.firebase.google.com/project/_/database/data/). – Frank van Puffelen Mar 11 '17 at 17:24
  • I have the correct firebase url in there, I edited the url and error message to hide sensitive information. – Jack Zavarella Mar 11 '17 at 17:30
  • On the error that you posted it makes reference to 'https://console.firebase.google.com', that would be wrong as @FrankvanPuffelen said. Check my answer and example. – Pablo Palacios Mar 11 '17 at 21:05

1 Answers1

2

I hope this helps.

You will need to consider 3 things:
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 add the respective rules to allow 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/

Pablo Palacios
  • 2,767
  • 20
  • 37