Can't get Angular $resource to send proper Headers

Question

I'm building a prototype Angular app, using Parse as a temporary RESTful back end (Until the real restful backend is completed)

I've setup a Factory with $resource() but I'm constantly getting a 401 unauthorized.

Right now my factory looks like this (APPIDKEY AND APIKEY are redacted of course)

app.factory('eventFactory', ['$resource', function($resource){
        return $resource('https://api.parse.com/1/classes/Events',{}, 
            {headers:{"X-Parse-Application-Id": "APPIDKEY",
           "X-Parse-REST-API-Key": "APIKEY"}});

        }
    ]);

I've also tried writing the $resrouce like this.

$resource('https://myAppID:[email protected]/1/classes/Events');

But that also returns a 401. however if I copy and paste that URL into my browser the screen prints out all the objects in the request.

I've done extensive googling and read the $resource docs many times but I still can't quite figure this out. I'm thinking it has to do with Cross-Origin policy but the parse documentation says

'For Javascript usage, the Parse Cloud supports cross-origin resource sharing, so that you can use these headers in conjunction with XMLHttpRequest.' So I'm kinda stumped.

Any help is much appreciated. Thanks!

Answer 1

Adding these two lines inside my module.config function fixed it.

$httpProvider.defaults.headers.common['X-Parse-Application-Id']="APPIDKEY"
$httpProvider.defaults.headers.common['X-Parse-REST-API-Key']="RESTAPIKEY"

where APPIDKEY and RESTAPIKEY equal the keys provided from Parse.com