H5get请求重定向后页面没有跳转重定向的地址是什么问题;H5get请求重定向后页面不跳转自定义重定向跳转; XMLHttpRequest.DONE是什么状态

Ajax 请求的处理:如果使用了 XMLHttpRequest 或 Fetch API 进行 GET 请求,并通过异步处理来获取响应数据,那么浏览器不会自动跳转到重定向的地址。

如果在 H5 的 GET 请求中,服务器返回了重定向响应(HTTP 状态码为 3xx),但页面没有跳转到重定向的地址,可能有几种可能的原因:

  1. JavaScript 阻止了页面跳转:可能在页面中的 JavaScript 代码中有针对该 GET 请求的处理逻辑,例如通过阻止默认事件或修改页面行为的方式来阻止页面跳转。你可以检查页面中的 JavaScript 代码,查看是否有处理该请求的逻辑。

  2. Ajax 请求的处理:如果使用了 XMLHttpRequest 或 Fetch API 进行 GET 请求,并通过异步处理来获取响应数据,那么浏览器不会自动跳转到重定向的地址。在处理响应数据的回调函数中,你需要手动检查响应状态码以及处理重定向。确保在请求成功的回调中处理重定向的逻辑。

  3. 缓存问题:在某些情况下,浏览器可能会缓存重定向响应,导致页面没有立即跳转到重定向的地址。你可以尝试在 GET 请求中添加一些类似于时间戳的随机参数,以确保每次请求都是唯一的,避免缓存的影响。例如:

    var randomParam = Date.now();
    var url = "原始地址" + "?_=" + randomParam;
    xhr.open("GET", url, true);
    xhr.send();
    

    通过添加 ?_=<随机参数>,可以确保每次请求都是唯一的,从而避免缓存问题。

请检查以上可能的原因,并相应地进行调整和处理。如果问题仍然存在,提供更多关于你的代码和环境的详细信息,我将尽力提供更准确的帮助。


H5get请求重定向后页面不跳转自定义重定向跳转

在 H5 的 GET 请求中,如果服务器返回了重定向响应(HTTP 状态码为 3xx),浏览器会自动跟随重定向并加载新的地址。然而,有时候你可能希望在重定向后不立即跳转到新的地址,而是在 JavaScript 中获取重定向的地址进行处理。

要实现这个需求,你可以使用 JavaScript 中的 XMLHttpRequest(XHR)对象来发送 GET 请求,并手动处理重定向。以下是一个示例代码:

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status >= 200 && xhr.status < 300) {
      // 请求成功完成,可以获取响应数据
      var redirectedUrl = xhr.responseURL;
      // 在这里处理重定向后的地址
      console.log(redirectedUrl);
    } else {
      // 请求失败或出错,可以处理错误情况
      console.error("请求失败:" + xhr.status);
    }
  }
};

xhr.open("GET", "原始地址", true);
xhr.send();

在上述代码中,我们创建了一个 XMLHttpRequest 对象,并指定了 onreadystatechange 事件处理函数。当请求状态发生变化时,该函数会被调用。在事件处理函数中,我们首先检查请求的状态是否为 XMLHttpRequest.DONE,表示请求已完成。然后,我们进一步检查响应的状态码是否为成功的范围(2xx),以确定请求是否成功。

如果请求成功完成,我们可以通过 xhr.responseURL 属性获取重定向后的地址。你可以根据需要在这里处理重定向后的地址,例如保存地址、进行进一步操作等。

请注意,由于浏览器的安全限制,XHR 对象只能访问与原始域相同的域的地址。如果重定向的地址与原始域不同,浏览器会阻止访问,并返回一个空字符串作为 xhr.responseURL。这是出于安全考虑,以防止跨域攻击。

希望这个示例能满足你的需求。如果你有更多问题,请随时提问。

示例代码:

/** 重定向接口,不会自动跳转 */
// const getLoginUrl = await getScanLoginUrl({ token: res.info.token });
/** 原生方法自定义处理重定向的跳转 */
const xhr = new XMLHttpRequest();
let url = `${location.origin}/cgate/activity/subscriber/v1/shunt`;
/** xhr中添加请求头,get的url上添加params参数 */
let { commonParams } = useBaseStore();
commonParams = { ...commonParams, userId: res.info.id || '', token: res.info.token };
url += getQueryStr(commonParams);
console.log('url', url);
xhr.open('GET', url, true);
xhr.setRequestHeader('Authorization', `${res.info.token}`);
xhr.onreadystatechange = async function () {
    console.log('xhr', xhr);
    if (xhr.readyState === XMLHttpRequest.DONE) {
        if (xhr.status >= 200 && xhr.status < 300) {
            // 请求成功完成,可以获取响应数据
            const redirectedUrl = xhr.responseURL;
            // 在这里处理重定向后的地址
            console.log('处理重定向后的地址', redirectedUrl);
            await myTimeout(100);
            location.href = redirectedUrl;
            // location.replace(redirectedUrl);
        } else {
            showToast({ title: `跳转请求失败:状态码${xhr.status}`, icon: 'none' });
            // 请求失败或出错,可以处理错误情况
            console.error(`请求失败:${xhr.status}`);
        }
    }
};
xhr.send();

XMLHttpRequest.DONE是什么状态

XMLHttpRequest 对象的 readyState 属性表示当前请求的状态。其中,XMLHttpRequest.DONEreadyState 的一个可能取值,表示请求已完成。

XMLHttpRequest.DONE 的值为 4。它是 readyState 属性的最终状态,表示请求已经完成并且响应已经就绪。在这个状态下,可以通过检查 XMLHttpRequest 对象的 status 属性来获取响应的 HTTP 状态码,并通过 responseTextresponseXML 属性来获取响应的内容。

以下是 readyState 的可能取值:

  • XMLHttpRequest.UNSENT (0): XMLHttpRequest 对象已创建,但尚未调用 open 方法。
  • XMLHttpRequest.OPENED (1): open 方法已经被调用,但尚未调用 send 方法。
  • XMLHttpRequest.HEADERS_RECEIVED (2): send 方法已经被调用,且所有响应头都已经接收到。
  • XMLHttpRequest.LOADING (3): 响应内容正在被接收。
  • XMLHttpRequest.DONE (4): 响应已完成,且响应数据可用。

在监听 onreadystatechange 事件时,通常会检查 readyState 的值是否为 XMLHttpRequest.DONE,以确保请求已经完成并且可以处理响应数据。

xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    // 请求已完成
    if (xhr.status === 200) {
      // 请求成功,处理响应
      console.log(xhr.responseText);
    } else {
      // 请求失败,处理错误
      console.error('请求失败:' + xhr.status);
    }
  }
};

以上示例展示了如何在 readyStateXMLHttpRequest.DONE 时处理请求的结果。如果 status 为 200,则表示请求成功,并可以通过 responseText 属性访问响应的文本内容。

希望这解释清楚了 XMLHttpRequest.DONE 状态的含义。如果还有其他疑问,请随时提问。

当使用 XMLHttpRequest 发送请求时,如果遇到重定向,该对象会自动跟随重定向并返回最终的响应结果。你只能获取最终的状态码和响应数据,无法直接获取重定向前的状态码。

posted @ 2024-03-29 12:04  yoona-lin  阅读(95)  评论(0编辑  收藏  举报