jquery - 自定义 header 的 ajax GET 不起作用 [CORS，预检]

Question

我正在尝试获取名为 X-Total-Pages 的自定义 header 当我做GET时 Ajax 调用。调用从客户端发送到 API。API 允许使用以下 header :

• 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 请求，检查允许哪些方法、 header 等。

在网络选项卡中，补充此 GET 的 OPTIONS 请求是什么样的？它有 X-Total-Pages header 吗？

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