Express URL跳转(重定向)的实现方法


Posted in Javascript onApril 07, 2017

Express是一个基于Node.js实现的Web框架,其响应HTTP请求的response对象中有两个用于URL跳转方法res.location()和res.redirect(),使用它们可以实现URL的301或302重定向。

res.location(path)

res.location(path)

下面列举了几种,设置http响应头Location的方法

res.location('/foo/bar');
res.location('http://example.com');
res.location('back');

路径值back具有特殊的意义,这个涉及到请求头Referer中指定的URL,如果Referer头没有指定,将会设置为'/'。

Express通过Location头将指定的URL字符串传递给浏览器,它并不会对指定的字符串进行验证(除'back'外)。而浏览器则负责将当前URL重定义到响应头Location中指定的URL。

res.redirect([status,] path)

其中参数:

  1. status:{Number},表示要设置的HTTP状态码
  2. path:{String},要设置到Location头中的URL

使用指定的http状态码,重定向到指定的URL,如果不指定http状态码,使用默认的状态码”302“:”Found“,

res.redirect('/foo/bar');
res.redirect('http://example.com');
res.redirect(301, 'http://example.com');
res.redirect('../login');

重定向可以是一个完整的URL,这样会重定向到一个不同的站点上。

res.redirect('http://google.com');

重定向也可以相对于所在主机的根目录,例如,如果你的程序运行在:http://example.com/admin/post/new上下面的代码将会重定向到如下地址:http://example.com/admin

res.redirect('/admin');

重定向也可以相对于当前的URL,例如:从http://example.com/blog/admin/这个地址(注意反斜杠),下面的代码将会重定向到地址:http://example.com/blog/admin/post/new

res.redirect('post/new')

在从地址: http://example.com/blog/admin重定向到 post/new,如果没有反斜杠的话将会重定向到:http://example.com/blog/post/new

如果你感觉上面的行为很迷惑,想想文件目录和文件的路径,这会让你更好理解。

相对路径的重定向也是允许的,如果你的地址是: http://example.com/admin/post/new,下面的代码将会重定向到http//example.com/admin/post这个地址:

res.redirect('..');

back重定向,重定向到请求的referer,当没有referer请求头的情况下,默认为‘/'

res.redirect('back');

URL重定向原理

Express URL跳转(重定向)的实现方法

进行URL重定向时,服务器只在响应信息的HTTP头信息中设置了HTTP状态码和Location头信息。

当状态码为301或302时(301-永久重定向、302-临时重定向),表示资源位置发生了改变,需要进行重定向。

Location头信息表示了资源的改变的位置,即:要跳重定向的URL。

 location()与redirect()的比较

Express的response对象,是对Node.js原生对象ServerResponse的扩展。location()方法只会设置Location头,而redirect()方法除了会设置Location头外还可自动或手头设置HTTP状态码。理论上讲两者可以实现重定向。

location()方法实现过程大致如下:

res.location = function(url){
 var req = this.req;

 // "back" 是 referrer的别名
 if ('back' == url) url = req.get('Referrer') || '/';

 // 设置Lcation
 this.setHeader('Location', url);
 return this;
};

从以上代码可以看出,location()方法本质上是调用了ServerResponse对象的setHeader()方法,但并没有设置状态码。通过location()设置头信息后,其后的代码还会执行。

使用location()方法实现URL的重定向,还要手动设置HTTP状态码:

res.location('http://itbilu.com');
res.statusCode = 301;

如果需要立即返回响应信息,还要调用end()方法:

res.location('http://itbilu.com');
res.statusCode = 301;
res.end('响应的内容');

// 或
res.location('http://itbilu.com');
res.sent(302);

redirect()方法实现过程大致如下:

res.redirect = function(url){
 var head = 'HEAD' == this.req.method;
 var status = 302;
 var body;

 // 一些处理
 ……

 // 通过 location 方法设置头信息
 this.location(url);
 
 // 另一些处理
 ……

 // 设置状态并返回响应
 this.statusCode = status;
 this.set('Content-Length', Buffer.byteLength(body));
 this.end(head ? null : body);
};

从以上代码可以看出,redirect()方法是对location()方法的扩展。通过location()设置Loction头后,设置HTTP状态码,最后通过ServerResponse对象的end()方法返回响应信息。调用redirect()方法后,其后的代码都不会被执行

重定向与不重定向

在使用的过程中,redirect()方法大多能重定向成功,而location()方法则不太确定,有时可以成功有时不能成功。这与我们的用法有关。

上面讲过,URL重定向是在浏览器端完成的,而URL重定向与HTTP状态码和Location头有关。浏览器首先会判断状态码,只有当状态码是:301或302时,才会根据Location头中的URL进行跳转。

所以,使用location()设置头信息,而不设置状态码或状态码不是301或302,并不会发生重定向:

res.location('http://itbilu.com');
res.sent(200);

而使用redirect()设置的状态码不是301或302也不会发生跳转:

res.redirect(200, 'http://itbilu.com');

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery复选框checkbox实现删除前判断
Apr 20 Javascript
网站基于flash实现的Banner图切换效果代码
Oct 14 Javascript
jQuery插件Slider Revolution实现响应动画滑动图片切换效果
Jun 05 Javascript
JAVA四种基本排序方法实例总结
Jul 24 Javascript
基于javascript实现根据身份证号码识别性别和年龄
Jan 22 Javascript
详解原生JavaScript实现jQuery中AJAX处理的方法
May 10 Javascript
JS作用域闭包、预解释和this关键字综合实例解析
Dec 16 Javascript
vue不通过路由直接获取url中参数的方法示例
Aug 24 Javascript
javascript 开发之网页兼容各种浏览器
Sep 28 Javascript
原生JS实现小小的音乐播放器
Oct 16 Javascript
vue组件tabbar使用方法详解
Nov 06 Javascript
最全vue的vue-amap使用高德地图插件画多边形范围的示例代码
Jul 17 Javascript
微信小程序 首页制作简单实例
Apr 07 #Javascript
微信小程序 商城开发(ecshop )简单实例
Apr 07 #Javascript
js控制文本框禁止输入特殊字符详解
Apr 07 #Javascript
ES6学习笔记之Set和Map数据结构详解
Apr 07 #Javascript
Vue表单验证插件Vue Validator使用方法详解
Apr 07 #Javascript
js 数字、字符串、布尔值的转换方法(必看)
Apr 07 #Javascript
利用js的闭包原理做对象封装及调用方法
Apr 07 #Javascript
You might like
PHP 单引号与双引号的区别
2009/11/24 PHP
PHP curl使用实例
2015/07/02 PHP
PHP中配置IIS7实现基本身份验证的方法
2015/09/24 PHP
在WordPress的文章编辑器中设置默认内容的方法
2015/12/29 PHP
PHP模板引擎Smarty内建函数foreach,foreachelse用法分析
2016/04/11 PHP
CodeIgniter 完美解决URL含有中文字符串
2016/05/13 PHP
详解PHP中cookie和session的区别及cookie和session用法小结
2016/06/12 PHP
PHP使用Redis替代文件存储Session的方法
2017/02/15 PHP
onpropertypchange
2006/07/01 Javascript
[原创]js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
2007/03/12 Javascript
JavaScript window.document的属性、方法和事件小结
2012/10/24 Javascript
javascript获取下拉列表框当中的文本值示例代码
2013/07/31 Javascript
js call方法详细介绍(js 的继承)
2013/11/18 Javascript
javascript回车完美实现tab切换功能
2014/03/13 Javascript
javascript面向对象之访问对象属性的两种方式分析
2015/01/13 Javascript
JavaScript替换当前页面的方法
2015/04/03 Javascript
jQuery手机拨号界面特效代码分享
2015/08/27 Javascript
JavaScript获取function所有参数名的方法
2015/10/30 Javascript
JavaScript中windows.open()、windows.close()方法详解
2016/07/28 Javascript
js简单时间比较的方法
2016/08/02 Javascript
jquery实现瀑布流效果 jquery下拉加载新数据
2016/12/12 Javascript
JavaScript中正则表达式判断匹配规则及常用方法
2017/08/03 Javascript
javascript将16进制的字符串转换为10进制整数hex
2020/03/05 Javascript
[01:31:03]DOTA2完美盛典全回顾 见证十五项大奖花落谁家
2017/11/28 DOTA
为Python的Tornado框架配置使用Jinja2模板引擎的方法
2016/06/30 Python
python实现寻找最长回文子序列的方法
2018/06/02 Python
python numpy 一维数组转变为多维数组的实例
2018/07/02 Python
python 画三维图像 曲面图和散点图的示例
2018/12/29 Python
Python实现bilibili时间长度查询的示例代码
2020/01/14 Python
python实现吃苹果小游戏
2020/03/21 Python
利用HTML5实现使用按钮控制背景音乐开关
2015/09/21 HTML / CSS
使用canvas来完成线性渐变和径向渐变的功能的方法示例
2019/07/25 HTML / CSS
优秀干部获奖感言
2014/01/31 职场文书
简单聊聊Golang中defer预计算参数
2022/03/25 Golang
kubernetes集群搭建Zabbix监控平台的详细过程
2022/07/07 Servers
Mybatis 一级缓存和二级缓存原理区别
2022/09/23 Java/Android