JQuery、CORS 和自定义响应标头答案

【问题标题】：JQuery, CORS and custom response headersJQuery、CORS 和自定义响应标头
【发布时间】：2013-07-08 23:59:47
【问题描述】：

我有一个接受 CORS 请求的 Web 服务器。此服务器的所有响应都附加一个名为 X-Server-Version 的自定义标头。

此自定义标头列在 CORS 预检响应的 Access-Control-Expose-Headers 标头中（请参阅Cross Domain Resource Sharing GET: 'refused to get unsafe header "etag"' from Response）。我使用 ngrep 捕获了响应，如下所示。

  HTTP/1.1 200 OK..Server: Apache-Coyote/1.1..Access-Control-Allow-Headers: accept, origin, content-type..Access-Control-Allow-Origin: *..Access-Control-Expose-Headers: X-Server-Version..X-Server-Version: 1.0-SNAPSHOT..Access-Control-Allow-Methods: POST..Content-Length: 0..Date: Wed, 10 Jul 2013 21:05:58 GMT....

这是一个简单的 Javascript 应用程序，它调用启用了 CORS 的端点。

<html>
    <head>
        <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
        <script>
            $.ajax({
              type: "POST",
              url: "http://server",
              data: '{"value":"whatever"}',
              success: function(data, textStatus, jqXHR) {
                console.log(jqXHR.getAllResponseHeaders());
              },
              error: function (XMLHttpRequest, textStatus, errorThrown) {
                console.log(XMLHttpRequest.getAllResponseHeaders())
              },
              contentType:"application/json; charset=utf-8",
            });         
        </script>
    </head>
    <body>
    </body>
</html>

无论此调用成功还是失败，getAllResponseHeaders() 都不会为 Chrome 28 或 Firefox 22 列出此自定义标头。ngrep 还会确认该标头存在于对浏览器的响应中。

HTTP/1.1 200 OK..Server: Apache-Coyote/1.1..Access-Control-Allow-Origin: *..X-Server-Version: 1.0-SNAPSHOT..Content-Encoding: gzip..Content-Type: application/json..Content-Length: 7
  406..Date: Wed, 10 Jul 2013 21:09:11 GMT..

有谁知道是否可以通过 jQuery ajax 调用访问自定义标头？

【问题讨论】：

请将您的标题更改为描述您的问题的内容，而不仅仅是一组标签。
I'm just going to leave this here
AJAX get custom response headers with CORS的可能重复

标签： jquery cors

【解决方案1】：

这里的问题是需要在 CORS 响应中设置 Access-Control-Expose-Headers 标头，而不是预检（尽管如果出于某种原因您想在预检中读取自定义标头，则可以在预检中设置它）选项请求）。这个事实在我阅读的任何文档中都没有特别清楚，所以我想我会在这里分享我的答案。

因此，由 ngrep 捕获的响应应该类似于

HTTP/1.1 400 Bad Request..Server: Apache-Coyote/1.1..Access-Control-Allow-Origin: *..Access-Control-Expose-Headers: X-Server-Version..X-Server-Version: 1.0-SNAPSHOT..Content-Enco
  ding: gzip..Content-Type: text/plain..Content-Length: 82..Date: Wed, 10 Jul 2013 23:03:37 GMT..

返回该标头后，访问客户标头即可正常工作。

【讨论】：