jQuery和AJAX响应标头


163

因此,我得到了这个jQuery AJAX调用,并且响应以302重定向的形式来自服务器。我想进行此重定向并将其加载到iframe中,但是当我尝试使用JavaScript警报查看标头信息时,即使firebug正确看到了该信息,它也会显示为空。

这是代码,如果有帮助的话:

$j.ajax({
    type: 'POST',
    url:'url.do',
    data: formData,
    complete: function(resp){
        alert(resp.getAllResponseHeaders());
    }
});

我真的没有访问服务器端内容的权限,无法将URL移到响应正文,我知道这是最简单的解决方案,因此,解析标头的任何帮助都非常出色。


3
如果您在2017年或以后访问此问题,请不要在大多数现有答案上浪费时间。如果您的问题与OP相同,则有两个选择:1)设置一个代理服务器,post该服务器将原始服务器并提取目标数据,前端JS将向该代理服务器请求目标数据。或者,2)更改服务器代码以允许CORS。
kmonsoor

Answers:


186

如果您使用的是旧版本的jquery,则cballou的解决方案将起作用。在较新的版本中,您也可以尝试:

  $.ajax({
   type: 'POST',
   url:'url.do',
   data: formData,
   success: function(data, textStatus, request){
        alert(request.getResponseHeader('some_header'));
   },
   error: function (request, textStatus, errorThrown) {
        alert(request.getResponseHeader('some_header'));
   }
  });

根据文档,XMLHttpRequest对象从jQuery 1.4开始可用。


5
从jQuery> = 1.5开始,应将其称为jqXHR,它是XHR对象的超集。
2014年

136

如果这是一个CORS请求,则您可能会在调试工具中看到所有标头(例如Chrome-> Inspect Element-> Network),但是如果xHR对象仅xhr.getResponseHeader('Header')是一个简单的响应标头,则xHR对象将仅通过检索标

  • Content-Type
  • Last-modified
  • Content-Language
  • Cache-Control
  • Expires
  • Pragma

如果它不在此集合中,则它必须出现在服务器返回的Access-Control-Expose-Headers标头中。

关于所讨论的情况,如果它是一个CORS请求,则仅当并且也存在以下标头时,才能Location通过该XMLHttpRequest对象检索标头:

Access-Control-Expose-Headers: Location

如果它不是CORS请求,XMLHttpRequest则检索它不会有任何问题。


3
@acdcjunior谢谢您,在我花了一些时间找出标题响应中为什么没有输出之后,它也对我有所帮助
daniyel 2015年

33
 var geturl;
  geturl = $.ajax({
    type: "GET",
    url: 'http://....',
    success: function () {
      alert("done!"+ geturl.getAllResponseHeaders());
    }
  });

1
对我不起作用。也许我正在向另一个站点发出请求?(使用ajax进行跨站点请求)
沉思玮申思

9
对于那些无法像我一样工作的人。可能是因为您正在执行跨域访问,而jquery不使用XHR。api.jquery.com/jQuery.get
h--n

像魅力一样醒来。.+1
ErShakirAnsari

18

关于AJAX和302重定向的不幸事实是,您无法从返回中获取标头,因为浏览器从未将标头提供给XHR。当浏览器看到302时,它会自动应用重定向。在这种情况下,您会在firebug中看到标头,因为浏览器已获得标头,但在ajax中却看不到标头,因为浏览器未传递标头。这就是为什么成功和错误处理程序永远不会被调用的原因。仅调用完整的处理程序。

http://www.checkupdown.com/status/E302.html

The 302 response from the Web server should always include an alternative URL to which redirection should occur. If it does, a Web browser will immediately retry the alternative URL. So you never actually see a 302 error in a Web browser

这是关于此主题的一些stackoverflow帖子。一些帖子描述了解决此问题的技巧。

jQuery Ajax调用后如何管理重定向请求

在JavaScript中捕捉302 FOUND

HTTP重定向:301(永久)与302(临时)


10

jQuery使用的基础XMLHttpRequest对象将始终以静默方式进行重定向,而不是返回302状态代码。因此,您不能使用jQuery的AJAX请求功能来获取返回的URL。相反,您需要将所有数据放入表单中,然后提交target属性设置为nameiframe属性值的表单:

$('#myIframe').attr('name', 'myIframe');

var form = $('<form method="POST" action="url.do"></form>').attr('target', 'myIframe');
$('<input type="hidden" />').attr({name: 'search', value: 'test'}).appendTo(form);

form.appendTo(document.body);
form.submit();

服务器url.do页面将被加载到iframe中,但是当其302状态到达时,iframe将被重定向到最终目标。


9

试试这个:

type: "GET",
async: false,
complete: function (XMLHttpRequest, textStatus) {
    var headers = XMLHttpRequest.getAllResponseHeaders();
}

嗯 非常感谢您的答复,但这仍然返回null。还有其他想法吗?
Shane

也许您正在使用旧版本的jquery。
罗夫森

6

JQUERY 3及更高版本的更新2018

我知道这是一个古老的问题,但是上述解决方案都不适合我。这是有效的解决方案:

//I only created this function as I am making many ajax calls with different urls and appending the result to different divs
function makeAjaxCall(requestType, urlTo, resultAreaId){
        var jqxhr = $.ajax({
            type: requestType,
            url: urlTo
        });
        //this section is executed when the server responds with no error 
        jqxhr.done(function(){

        });
        //this section is executed when the server responds with error
        jqxhr.fail(function(){

        })
        //this section is always executed
        jqxhr.always(function(){
            console.log("getting header " + jqxhr.getResponseHeader('testHeader'));
        });
    }

2

+1到PleaseStand,这是我的另一个技巧:

搜索后发现“跨Ajax请求”无法从XHR对象获取响应头,我放弃了。并改用iframe。

1. <iframe style="display:none"></iframe>
2. $("iframe").attr("src", "http://the_url_you_want_to_access")
//this is my aim!!!
3. $("iframe").contents().find('#someID').html()  
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.