是否可以通过 Ajax 获取页面重定向信息？答案

【问题标题】：Is it possible to get page redirect information via Ajax?是否可以通过 Ajax 获取页面重定向信息？
【发布时间】：2016-02-21 05:03:54
【问题描述】：

如果没有 ajax，如果我们加载 http://example.com/1 并且如果它重定向到 http://example.com/2，那么浏览器会获得适当的标题并且浏览器 URL 会得到更新。有没有办法通过 jQuery Ajax 获取这些信息？

例如，我通过 Ajax 请求 http://api.example.com。在 PHP 中，这个页面被重定向到http://api2.example.com。有可能知道这件事吗？

用途： 我有一个带有链接的导航栏。所有页面都通过 AJAX 加载到容器中，然后我根据链接使用 HTML5 历史记录将 URL 推送到浏览器栏上。

但是，如果页面被重定向，页面会有一个新链接，对吧？我也想在浏览器栏中更改它。我想知道 Ajax URL 被重定向到哪里，以防被重定向。

为什么这很重要？ 我的链接处理表单数据、请求和各种身份验证。例如，如果我请求，https://oauth.example.org?code=56hycf86 将重定向到 success 或 failure 页面。我的 Ajax 获得了正确的 html 内容，但 URL 浏览器栏仍然具有具有相同 Auth ID 的 URL，如果重新加载，则会产生错误。还有其他安全问题。

我不知道我解释的是否正确，但感谢您的帮助。

【问题讨论】：

使用 JavaScript，window.location.href = NEW_URL 就可以了...您的问题还不清楚...
不，您不能跨浏览器执行此操作。你想解决什么问题？
@charlietfl 我用使用更新了这个问题。我想知道 Ajax URL 被重定向到哪里，以防它被重定向。
是的..我明白这一点，但你还没有解释为什么你需要最终的 url。编辑问题没有意义
@charlietfl 我用使用更新了这个问题。感谢您的宝贵时间。

标签： javascript jquery ajax

【解决方案1】：

不幸的是，ajax 总是遵循重定向。但是有一个特性并不是所有浏览器都支持，你可以访问 XMLHttpRequest 对象的 responseURL 属性。

您可以在下面的代码 sn-p 中尝试一下。重定向按钮将 ajax 请求发送到回复 1 个重定向的 URL（如果有多个重定向，它也可以工作）。无重定向按钮将 ajax 请求发送到没有重定向的 URL。

据我所知，IE 11 和旧版本的 chrome/firefox/opera 浏览器不支持此方法。

document.getElementById("no-redirect").addEventListener("click", function() {
  testRedirect("https://httpbin.org/get");
});

document.getElementById("redirect").addEventListener("click", function() {
  testRedirect("https://httpbin.org/redirect/1");
});


function testRedirect(url) {
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function(e) {
    if (xhr.status == 200 && xhr.readyState == 4) {
      if (url != xhr.responseURL) {
        alert("redirect detected to: " + xhr.responseURL)
      } else {
        alert("no redirect detected")

      }
    }
  }
  xhr.open("GET", url, true);
  xhr.send();
}

<button id="redirect">
  Redirect
</button>
<button id="no-redirect">
  No Redirect
</button>

【讨论】：

这导致访问 XMLHttpRequest 在 'shortened/' 从源 'localhost:3000' 已被 CORS 策略阻止：请求的资源上不存在 'Access-Control-Allow-Origin' 标头.

【解决方案2】：

这可能不是您想要的，但也许它会帮助您获得类似的效果。

如果您可以控制页面 http://api.example.com 的操作，您可以更改它在通过 AJAX 收到呼叫时的反应方式。

您可以在 AJAX 调用中包含一个变量，将其标记为此类调用，如果存在此变量，则不会重定向到其他页面，而是在答案中包含它将重定向到的 URL。

AJAx 调用返回的数据可以是一个哈希，其中一个键代表重定向 url。

data = {status => 1, redirect => 'http://ap2.example.com', …}

（抱歉，如果这不是有效的 PHP 哈希）

【讨论】：

【解决方案3】：

不确定我是否理解，但只是尝试了一些东西，如果不是您要查找的内容，请通知我删除答案。

在这里，我们将 /#/ 注入到 URL 中，因此当点击链接时，浏览器将在 URL 中有一个新段，代表参数，您可以根据其值确定要访问哪个页面使用相应的 AJAX 调用加载..

JS/jQuery：

var navLinks = $('#nav a'),
    params = [],
    baseURL = '//localhost/test/js-url-parameters-second';

navLinks.each(function(){
    var oldHREF = $(this).attr('href');
    $(this).attr('href', baseURL +'/#/'+ oldHREF);
});

navLinks.on('click', function(){
    checkURL($(this).attr('href'));
});

function checkURL(docURL){
    // if /#/ found then we have URL parameters
    // grabbing the parameters part of the URL
    if(docURL.indexOf('/#/') > -1){
        docURL = docURL.split('/#/')[1];
        if(docURL != ''){
            // omit the last forward slash if exists
            if(docURL[docURL.length - 1] == '/'){
                docURL = docURL.substring(0, docURL.length - 1);
            }
            console.log(docURL);
            $('#page-type').text(docURL);
        }
    } else {
        console.log('No URL parameters found');
    }
}

HTML：

<div id="nav">
  <a href="home" data-name="Home">Home</a>
  <a href="about" data-name="About">About</a>
  <a href="contact" data-name="Contact">Contact</a>
</div>
<hr>
<div id="container">
  this is the <span id="page-type">Home</span> page
</div>

【讨论】：

【解决方案4】：

正如已经提到的 responseURL 还没有最好的浏览器支持，对于这种情况还有 2 个可以使用的替代方案，http 请求标头和 cookie。

这样做的好处是它们不会干扰内容本身，例如查询字符串键、哈希标签或嵌入响应数据中。

请求标头

服务器端

PHP

$req->addHeader("X-Response-Url", "....");

ASP
```
headers.Add("X-Response-Url", "....");
```

客户端

xhr.onreadystatechange = function(e) {
  if (xhr.status == 200 && xhr.readyState == 4) {

    var resp_url = xhr.getResponseHeader("X-Response-Url");

    if (send_url != resp_url) {
      // redirected
    }

  }
}

Cookie

PHP
```
setcookie("XResponseUrl", "...");
```

ASP

Response.Cookies("XResponseUrl") = "..."

客户端

xhr.onreadystatechange = function(e) {
  if (xhr.status == 200 && xhr.readyState == 4) {

    var resp_url = getCookie("XResponseUrl");

    if (send_url != resp_url) {
      // redirected
    }

  }
}


function getCookie(name) {
  var re = new RegExp(name + "=([^;]+)");
  var value = re.exec(document.cookie);
  return (value != null) ? unescape(value[1]) : null;
}

【讨论】：

【解决方案5】：

是的，当您使用 Ajax 请求 http://api.example.com 时，浏览器不会重定向。您可以使用 jQuery 获得所有响应，如下所示

$.ajax({
    url: "http://api.example.com",
    success: function(data, textStatus, xhr) {
        console.log(xhr.status);
    },
    complete: function(xhr, textStatus) {
        console.log(xhr.status);
    } 
});

【讨论】：

这不是被问到的。请求被重定向，OP 想知道在哪里
@ThanhKiều 我猜这给了我代码整数状态代码。