CODEWITHSUNDEEP
javascriptangularjsparse-platformcors
dook
dook

Reputation: 1243

Using Parse Client Key in Angular gives CORS error

I am attempting to retrieve a class (with GET) from Parse using a client key. I was able to send a successful request using Advanced Rest Client for Google Chrome; I used X-Parse-Application-Id and X-Parse-Client-Key headers.

[edit] [edit2] Response headers (obtained from Chrome Developer Tools OPTIONS):

HTTP/1.1 200 OK

Access-Control-Allow-Headers: X-Parse-REST-API-Key, X-Parse-Javascript-Key, X-Parse-Application-Id, X-Parse-Client-Version, X-Parse-Session-Token, X-Requested-With, X-Parse-Revocable-Session, Content-Type

Access-Control-Allow-Methods: OPTIONS, POST, GET, PUT, DELETE

Access-Control-Allow-Origin: *

Access-Control-Max-Age: 86400

Content-Type: application/json; charset=utf-8

Date: Sun, 29 Nov 2015 04:23:08 GMT

Server: nginx/1.6.0

X-Parse-Platform: G1

X-Runtime: 0.000118

Content-Length: 0

Connection: keep-alive

However, attempting to do the same in an Angular app gives me the following error:

XMLHttpRequest cannot load https://api.parse.com/1/classes/GenResources. Request header field X-Parse-Client-Key is not allowed by Access-Control-Allow-Headers in preflight response.

Parse says it supports using cross-origin resource sharing, and I was able to make the request earlier using a different client so I'm pretty sure the server isn't the issue. I wouldn't be able to modify what the response header is anyways.

Here's the code I used to form the GET request.

var ng_portal = angular.module("ngPortal", []);
ng_portal.controller("GenResourcesCtrl", ["$http", function($http) {
  $http({
    method: "GET",
    url: PARSE_URL + "/1/classes/GenResources",
    headers: {
      "Content-Type": "application/json",
      "X-Parse-Application-Id": PARSE_APP_ID,
      "X-Parse-Client-Key": PARSE_CLIENT_KEY
    }
  }).then(
    function success(res) {
      console.log(res);
    },
    function error(res) {
      console.log(res);
    }
  );
}]);

Upvotes: 0

Views: 1753

Answers (2)

wsgeorge
wsgeorge

Reputation: 1968

This seems to be an issue with Parse.com actually. After exactly one frustrated hour, I came across this Google Groups post

Relevant quote

From my testing, this never ( client or javascript key) worked via javascript rest interactions through the browser.

I actually created a Parse Bug on this:

https://developers.facebook.com/bugs/488204124680438

Because I thought both of those keys should work through the browser ( WITHOUT NEEDING TO USE A SDK ).

I’d suggest reading reading my bug. I still think the the correct implementation is to enable these keys to work properly with browser requests because it works if you do it outside the browser.

But alas, they don’t seem to get the issue, or don’t understand why disabling it only in the browser doesn’t make sense since you can use it on any other platform without issues. Just… Doesn’t… Make… Sense.

I instead used my JavaScript Key X-Parse-Javascript-Key (which, according to the docs as of today, only works with their JavaScript SDK) and it works fine as a drop-in replacement for X-Parse-Client-Key

Upvotes: 0

allenru
allenru

Reputation: 717

You are setting custom headers in the request, which will trigger a pre-flight (OPTIONS) request. The response from that request must include a header called "access-control-allow-headers" with the value being a list of the headers you are trying to set.

See https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

specifically the section on pre-flight requests.

I suggest using the browser developer tools to look at the headers of the requests and responses to see if they conform to the CORS spec. From the error message you provided, it looks like the server hosting the cross domain call you are making, does not support custom headers. If you see otherwise, please update your question with the headers and I can provide more help.

Upvotes: 3

Related Questions