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 前端博客。