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 相关文章推荐
一个可以增加和删除行的table并可编辑表格中内容
Jun 16 Javascript
Js调用Java方法并互相传参的简单实例
Aug 11 Javascript
AngularJS使用ng-repeat指令实现下拉框
Aug 23 Javascript
js 判断附件后缀的简单实现方法
Oct 11 Javascript
原生JavaScript制作计算器
Oct 16 Javascript
ajax图片上传,图片异步上传,更新实例
Dec 30 Javascript
js控制按钮,防止频繁点击响应的实例
Feb 15 Javascript
BootStrap Table 后台数据绑定、特殊列处理、排序功能
May 27 Javascript
vue与bootstrap实现时间选择器的示例代码
Aug 26 Javascript
详解设置Webstorm 利用babel将ES6自动转码成ES5
Dec 20 Javascript
微信小程序template模版的使用方法
Apr 13 Javascript
如何对react hooks进行单元测试的方法
Aug 14 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
PHP5.0正式发布 不完全兼容PHP4 新增多项功能
2006/10/09 PHP
discuz程序的PHP加密函数原理分析
2011/08/05 PHP
Thinkphp的volist标签嵌套循环使用教程
2014/07/08 PHP
PHP实现的迪科斯彻(Dijkstra)最短路径算法实例
2017/09/16 PHP
jQuery实现的Email中的收件人效果(按del键删除)
2011/03/20 Javascript
js打开windows上的可执行文件示例
2014/05/27 Javascript
jQuery实现首页顶部可伸缩广告特效代码
2015/04/15 Javascript
jQuery实现两款有动画功能的导航菜单代码
2015/09/16 Javascript
每天一篇javascript学习小结(RegExp对象)
2015/11/17 Javascript
Jquery1.9.1源码分析系列(十五)动画处理之外篇
2015/12/04 Javascript
jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法分析
2016/06/08 Javascript
下一代Bootstrap的5个特点 超酷炫!
2016/06/17 Javascript
基于JS实现checkbox全选功能实例代码
2016/10/31 Javascript
vue中mint-ui环境搭建详细介绍
2017/04/06 Javascript
使用Math.max,Math.min获取数组中的最值实例
2017/04/25 Javascript
微信小程序实现顶部普通选项卡效果(非swiper)
2020/06/19 Javascript
Vue 使用 Mint UI 实现左滑删除效果CellSwipe
2018/04/27 Javascript
Vue组件之单向数据流的解决方法
2018/11/10 Javascript
JQuery样式与属性设置方法分析
2019/12/07 jQuery
公众号SVG动画交互实战代码
2020/05/31 Javascript
antd多选下拉框一行展示的实现方式
2020/10/31 Javascript
jQuery实现增删改查
2020/12/22 jQuery
详解Python中pandas的安装操作说明(傻瓜版)
2019/04/08 Python
Pytorch卷积层手动初始化权值的实例
2019/08/17 Python
python中提高pip install速度
2020/02/14 Python
Python sql注入 过滤字符串的非法字符实例
2020/04/03 Python
tensorflow使用freeze_graph.py将ckpt转为pb文件的方法
2020/04/22 Python
加拿大购物频道:The Shopping Channel
2016/07/21 全球购物
购买正版游戏和游戏激活码:Green Man Gaming
2019/11/06 全球购物
个人求职信范文分享
2013/12/13 职场文书
根叔历年演讲稿
2014/05/20 职场文书
企业年度评优方案
2014/06/02 职场文书
个人汇报材料范文
2014/12/30 职场文书
外国人来华邀请函
2015/01/31 职场文书
市场部岗位职责
2015/02/12 职场文书
2015年工程师工作总结
2015/04/30 职场文书