javascript - 在 Angular 中使用 Parse Client Key 会出现 CORS 错误

Question

我正在尝试使用客户端 key 从 Parse 检索类(使用 GET)。我能够使用 Google Chrome 的 Advanced Rest Client 发送成功的请求；我使用了 X-Parse-Application-Id 和 X-Parse-Client-Key header 。

[编辑][编辑2]响应 header (从 Chrome 开发者工具选项获取):

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

但是，尝试在 Angular 应用程序中执行相同操作会出现以下错误:

XMLHttpRequest 无法加载 https://api.parse.com/1/classes/GenResources 。预检响应中的 Access-Control-Allow-Headers 不允许请求 header 字段 X-Parse-Client-Key。

Parse 表示它支持使用 cross-origin resource sharing ，并且我能够使用不同的客户端更早地发出请求，所以我很确定服务器不是问题。无论如何，我无法修改响应 header 的内容。

这是我用来形成 GET 请求的代码。

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

Answer 1

您正在请求中设置自定义 header ，这将触发预检 (OPTIONS) 请求。该请求的响应必须包含一个名为“access-control-allow-headers”的 header ，其值是您尝试设置的 header 的列表。

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

特别是有关飞行前请求的部分。

我建议使用浏览器开发人员工具查看请求和响应的 header ，看看它们是否符合 CORS 规范。从您提供的错误消息来看，托管您正在进行的跨域调用的服务器似乎不支持自定义 header 。如果您发现其他情况，请使用标题更新您的问题，我可以提供更多帮助。