如何在 jquery ajax 成功中获得响应头授权？答案

【问题标题】：How to get response headers authorization in jquery ajax success?如何在 jquery ajax 成功中获得响应头授权？
【发布时间】：2016-10-21 09:21:20
【问题描述】：

我在前端设置加密的用户名和密码授权，并从服务器获取请求标头响应承载授权。在 ajax 中，我可以在 safari 中正确获取响应头，但在 chrome 和 firefox 中，它就像一个空值。该问题仅在 chrome 和 firefox 中获取不记名令牌。如何解决这些问题？

Ajax 代码，

$.ajax({
            type:"POST",
            url:url,
            dataType: "json",
            async:false,
            headers:{ 
                'Authorization':'Basic '+btoa(useremail+":"+password)
            },
            data:'{"datas"}',
            success: function (data, status, request, xhr){
                alert(request.getResponseHeader('Authorization'));
            }

【问题讨论】：

是跨域请求吗？您设置 async: false 的任何具体原因？
@fabio.sussetto 是的。这是跨域请求。 async false 没有具体原因。
那么您应该删除 async: false ：“强烈建议不要将此选项设置为 false（从而使调用不再异步），因为它可能导致浏览器无响应。”

标签： javascript jquery ajax

【解决方案1】：

请注意，从 jQuery 1.8 开始，async 选项已弃用。

至于为什么会发生这种情况：

在 CORS 请求期间，getResponseHeader() 方法只能访问简单的响应头。简单的响应头定义为如下：

缓存控制

内容-语言

内容类型

过期

最后修改

编译指示

至于解决方案：

如果您希望客户端能够访问其他标头，则必须使用 Access-Control-Expose-Headers 标头。此标头的值是您要公开的响应标头的逗号分隔列表客户。

来源：https://www.html5rocks.com/en/tutorials/cors/

【讨论】：

在添加 Access-Control-Expose-Headers 标头后，getResponseHeader 在 firefox/chrome 上是否仍返回 null？
是的。我仍然只得到空值。
检查您是否没有在 Safari 中禁用 CORS：该选项位于“开发”菜单下。
@Sathya 您是否在开发者工具中看到 Chrome/Firefox 上此请求的服务器响应？是否已提出请求？是否返回响应？您是否添加了 Access-Control-Allow-Origin 标头以允许 CORS？
@biphobe 是的，我收到了有关开发人员工具的回复。您可以在我的问题中看到所附图片。

【解决方案2】：

参考这篇文章：http://osric.com/chris/accidental-developer/2014/08/using-getresponseheader-with-jquerys-ajax-method/

尝试使用done函数，如文章中的示例所示：

$.ajax({
    type:"POST",
    url:url,
    dataType: "json",
    async:false,
    headers:{ 
        'Authorization':'Basic '+btoa(useremail+":"+password)
    },
    data:'{"datas"}',
}).done(function (data, textStatus, xhr) { 
    console.log(xhr.getResponseHeader('Authorization')); 
});

【讨论】：

您建议 OP 使用的 xhr 对象与他当前在成功回调中使用的 request相同的对象。

【解决方案3】：

试试这个..

    var settings = {
    "crossDomain": true,
    "url": url,
    "method": "POST",
    "headers": {
     "content-type": "application/x-www-form-urlencoded",
     "Authorization":"Basic "+btoa(useremail+":"+password)
    },
   "data": {
   "name": "name"
  }
 }

    $.ajax(settings).done(function (data,status, xhr) {
     console.log("Authorization=> "+xhr.getResponseHeader('Authorization'));
 });

【讨论】：