ajax GET 用于自定义标头不起作用 [CORS，预检]

Question

当我执行GET ajax调用时，我正在尝试获取一个名为X-Total-Pages的自定义标头。调用将从客户端转到 API。API 允许以下标头：

• Access-Control-Allow-Headers->rigin,X-Requested-With,Content-Type,Accept,Authorization,X-Total-Pages
• Access-Control-Allow-Methods → POST, GET, PUT, DELETE, OPTIONS
• Access-Control-Expose-Headers → X-Total-Pages
• Access-Control-Allow-Origin → *

ajax 调用是：

$.ajax({
  type: 'GET',
  url: URL,
  crossDomain: true,
  dataType: 'json',
  contentType: 'application/json; charset=utf-8',
  headers: {
    'X-PINGOTHER': 'pingpong',
    "Access-Control-Expose-Headers" : "X-Total-Pages",
    "Authorization": "Basic " + btoa(AuthStore.getUser().token + ":" + ''),
    'Access-Control-Request-Method' : 'GET',
    "Access-Control-Request-Headers": "X-Total-Pages",
    "Access-Control-Allow-Origin" : "localhost:3000",
  }
})
  .done((data, textStatus, jqXhr) => {
    console.log('waiting patients response: ', data);
    console.log(textStatus);
    console.log(jqXhr);
    console.log(jqXhr.getAllResponseHeaders());
    console.log(jqXhr.getResponseHeader('X-Total-Pages'));
  })
  .fail((jqXhr) => {
     ...
  });

console.log(jqXhr.getAllResponseHeaders());的结果是：

Content-Type: application/json; charset=utf-8 Cache-Control: max-age=0, private, must-revalidate

对于console.log(jqXhr.getResponseHeader('X-Total-Pages'));来说，这是null

有人可以告诉我什么是获得X-Total-Pages的正确方法吗？

Answer 1

浏览器将首先发出一个 OPTIONS 请求，该请求检查允许使用哪些方法、标头等。

在网络选项卡中，补充此 GET 的选项请求是什么样的？它有 X 总页标题吗？

MDN有关于CORS的良好文档：https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS