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

前言

需求是请求一个接口，这个接口是一个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前端博客。