XMLHttpRequest.responseURL获取302重定向后的地址

13366次浏览

前言

需求是请求一个接口,这个接口是一个302重定向地址,拿到重定向地址后,解析里面的参数,然后做一些逻辑操作,那么前端如何获取302重定向后的地址呢?

传统ajax方式

之前有写文章封装一个原生js的ajax请求,支持IE9CORS跨域请求,采用这种ajax请求的方式请求302地址,或者采用axiso,jquery等ajax请求302地址,都会返回空,并且直接跳转302之后的页面。这个不是我们想要达到的,那么有什么办法可以拿到302重定向的地址,而不跳转呢?

XMLHttpRequest.responseURL

只读属性XMLHttpRequest.responseURL返回响应的序列化URL,如果URL为空则返回空字符串。如果URL有锚点,则位于URL # 后面的内容会被删除。如果URL有重定向, responseURL 的值会是经过多次重定向后的最终 URL 。

方法代码

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://www.haorooms.com/post/js_ajax_cors_kyqq', true);
xhr.onload = function () {
  console.log(xhr.responseURL); // https://www.haorooms.com/post/js_ajax_cors_kyqq
};
xhr.send(null);

通过responseURL 就可以拿到302后的地址

简单方法封装

function get302UrlResponse(url, callback) {
  var xhr = new XMLHttpRequest()
  xhr.open('GET', url, true)
  xhr.onload = function () {
    callback(xhr.responseURL)
  }
  xhr.send(null)
}

使用

   get302UrlResponse(jumpUrl, (callBackurl) => {
        if (callBackurl) {
          let urlqueryObj = GetPageQueryString(new URL(callBackurl).search)
          let clickId = urlqueryObj['qz_gdt']
          callback({ clickid: clickId, dstlink: callBackurl, interactionType })
        } else {
          callback({ clickid: null, dstlink: jumpUrl, interactionType })
        }
      })

小结

上面就是ajax获取302后地址的方式。小知识点,记录一下。

haorooms前端博客,欢迎访问haorooms,最近haorooms关键词排名下降比较厉害,每个页面我都加一下关键词,欢迎访问haorooms前端博客。

Tags: xmlhttprequestajax302

相关文章: