模拟浏览器http请求，获得网页重定向后的信息

业务背景：

在项目开发中，常常需要与已有成型的系统通过使用http请求进行数据交互，而为了不直接修改已有系统的接口信息，需要通过使用网页重定向来进行跳转。也就是我们访问http://www.ibm.com.cn网站时，觉得很奇怪，明明键入的是http://www.ibm.com.cn，怎么IE自动把它变成了http://www.ibm.com/cn/，而且已访问结果也是正确的。

假设我们需要访问http://www.my.com.cn/index.php?a=shows&catid=12&id=37（路径系虚构，仅供参考）路径，可以获得商品详情。但是在我们新开发的项目中，商品的code和可访问的url并不一致，需要通过已有项目的http请求接口的重定向来实现。即通过访问http://www.my.com.cn:8080/Html5/F10web.do?id=690003来重定向到http://www.my.com.cn/index.php?a=shows&catid=12&id=37。而如果是手机浏览器访问，则在检测到手机之后，通过js重新请求适用于手机的页面，一个新的http请求http://www.my.com.cn/index.php?a=shows&catid=12&id=37&mobile=1。

问题：

在手机浏览器中开发，由于中间存在两次跳转，使得页面难以控制。如果使用iframe的形式，则会使得页面的在后退时出现后退两次的问题。如果使用angularjs的ngbindhtml的语法，则会中断第二次跳转，无法取到适用于手机的页面。

实现思路：

经过研究发现，这两次页面的跳转是两种不同的跳转方式。

对于第一种是页面的重定向导致的，即在业务背景中描述的方式。在这种情况下，通过分析network发现服务器会先返回下图

从返回的信息来看，最初的访问没有得到信息，服务器给返回了一个可获得该信息的新地址Location，浏览器在收到这个返回之后，根据Location地址发起第二次http请求，并成功得到需要的信息。

对于第二种页面跳转，是因为页面的js检测到这是手机浏览器，所以通过人为的href方式重新请求，并在url地址上注明是手机，即mobile=1。通过这次请求，返回的才是适合与手机浏览器显示的信息。

通过上述分析，我们发现，我们可以通过我们项目的服务器模拟第一次url请求，并拦截返回的response，分析获得response中的location，再进行第二次请求，同时在第二次请求的时候手动加上标识手机浏览器的mobile=1，这样将获得所需要的页面，最后将页面返回给前台进行渲染。

通过这种方式减少了一次页面跳转，同时前台只需要一次请求就可以获得所需要的信息。

特别提示：这种方式更加适用于页面的内嵌。

代码实现（nodejs）：

核心代码

var request = require("request");/** * 获得f10信息 * @param code * @param _callback */var file_url = "http://www.my.com.cn:8080/Html5/F10web.do?id=";function getF10(code, _callback) {    request(file_url + code, function (error, response) {        if (!error && response.statusCode == 200) {            request(this.href+"&mobile=1", function (error1, body){                let string = body.body.replace(/src="\//g, "src=\"" + 'http://www.my.com.cn/');                              _callback(null, string);            });        }        else {            _callback(error, null);        }    });}

核心代码解释：这是服务器端模拟http请求，使用的是request包。第一次接收用户输入的商品code，进行请求。得到response后，通过this.href可以得到location信息，将this.href和&mobile=1合并组成新的url后进行第二次请求。对于返回的response，将其中的相对路径改成绝对路径后返回给前端。

修改成绝对路径是因为中间有页面的重定向，而我们项目的url并没被改变，所以相对路径失效，需要改成绝对路径。

后记：

这里只给出了实现思路和核心后台服务器代码，前端请求就是简单的ajax请求，没有给出。

这里描述的背景可以拆分成两部分分别处理：第一次页面重定向和第二次的页面重新请求（href）。并不是固定不变的。

参考文章：浏览器可以自动修改URL