Using Parse Client Key in Angular gives CORS error

Question

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);
    }
  );
}]);

allenru allenru · Accepted Answer · 2015-11-29T03:33:26

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.

Using Parse Client Key in Angular gives CORS error

2 Answers