nodejs+express重定向

前言:

本篇代码中需要安装的依赖包包括:requestexpress

1.常用重定向方法

nodejs中的重定向可以使用.redirect()方法,该方法中可以传两个参数:code和path,code指重定向时,当前访问的这个接口的返回码301或302,为非必选参数;path指重定向的地址,必填参数。一般情况下,可以不指定code码直接重定向,这时,重定向的响应码默认为302。所以,重定向可以有两种写法:res.redirect(code, path)res.redirect(path)

2.前端伪造重定向

在实际使用中经常会遇到一些不可预知的状况。如本次文中在重定向时就遇到了这样的情况:nodejs在后台触发重定向到某个地址,浏览器会自动对这个url做一次options校验,options请求返回了403导致流程终止。这就导致我们的重定向无法完成。

针对这种情况,我们想了另外一种方式:那就是,后端在判断到需要重定向后,返回一个能够识别的响应,让前端来做跳转。具体的流程为:

  • 后端封装用于识别重定向的响应
  • 前端获取到结果,伪造重定向

实现方法为:

  1. 后端封装重定向响应
request.get(`request-url`, function(error, response, body) {if(!error && response.statusCode === 200) {next()} else if(response.statusCode === 401) {const data = {"code": 401,"authUrl": url,"status": "redirect"}res.send(data)}
})

request-url是一个判断用户是否有权限的接口。在本示例中,如果该接口的响应没有报错且响应的状态码是200,那么,express执行next中间件(next是从上一个方法中传入的);如果状态码不是200(401是request-url接口给出的错误状态码,调用不同接口需求确定该状态码为多少),会封装一个data对象,通过res.send(data)响应给浏览器。

在data对象中,code是状态码,status是状态标识,前端通过code和status一起进行判断是否重定向。url是重定向的地址

  1. 前端伪造重定向
if (code === 401) {letdata = res.dataif(data.status === 'redirect') {window.location.href = data.authUrlreturn}
}

可以看到,前端伪造重定向的依据是:code等于401且status为redirect。制造重定向的方法是使用window.location.href方法。这样,当访问到某个接口发现不满足条件时,就可以自动跳转到指定地址,完成了重定向。

3.特别情况说明

在本例中,重定向的是一个页面的地址,一个站点资源,如https://xxx/#/index的格式。

PS:注意/#/index,这是前端路由经典的webHash模式。

我们拼接的重定向跳转地址是:https://aaa.com?params=params&redirect_url=https://xxx/#/index,定义为redirectUrl。

可以看到,我们将redirect_url=https://xxx/#/index拼接到了https://aaa.com?params=params的后面。

出现的问题是:当我们通过浏览器window.location.href跳转时,浏览器地址栏中出现的是如下图所示的地址,#/index后缀丢失了:
在这里插入图片描述
出现这种问题的结果是什么呢?

在vue框架中,我们通过to.query获取不到?后面的参数,导致后续的一些工作无法开展。

怎么解决呢?

使用encodeURIComponent,将路径进行编码,访问就正常了。如本例中,我们在拼接redirect_url=https://xxx/#/index后的https://xxx/#/index时,以这种方式操作:

let url = "https://xxx/#/index"
let redirectUrl = encodeURIComponent(url )

这样一操作,在浏览器了就可以正常访问了。一些实现正常~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/178839.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

技巧篇:Mac 环境PyCharm 配置 python Anaconda

Mac 中 PyCharm 配置 python Anaconda环境 在 python 开发中我们最常用的IDE就是PyCharm,有关PyCharm的优点这里就不在赘述。在项目开发中我们经常用到许多第三方库,用的最多的命令就是pip install 第三方库名 进行安装。现在你可以使用一个工具来帮你解…

threejs (四) 纹理 Texture

定义:纹理图片(或canvas/video等)映射到物体表面,或者作为反射、折射贴图,也就是物体的皮肤。 1、纹理贴图分类 map:颜色贴图,存储颜色信息bumpMap:凹凸贴图,性能贴图&…

基于SpringBoot+Vue的在线外卖管理系统

基于SpringBootVue的在线外卖管理系统的设计与实现~ 开发语言:Java数据库:MySQL技术:SpringBootMyBatisVue工具:IDEA/Ecilpse、Navicat、Maven 系统展示 主页 下单界面 登录界面 商家界面 摘要 本文介绍了一种基于Spring Boot和…

绩效考核管理项目|记录1

项目用C#winformSQL Server写的,现在记录一下学习到的新东西。 winform工具 splitContainer:分割出两个容器,能添加面板之类的工具 treeview:展示标签页的分层集合(用户管理、基数管理......)&#xff0…

分享篇:我用数据分析做副业

主业是数据分析专家,副业是数据咨询顾问,过去十年里面利用数据分析发家致富 人生苦短,我学Python! 利用技能可以解决的问题,哪些场景下可以催生出需求,深度剖析数据分析的技能树 由浅入深,一个…

js 变量声明与赋值 笔试踩坑题

文章目录 概述函数声明函数形参与实参函数预编译用一个例子说明一下,这四个步骤分别要干些什么。重复四个步骤,反复练习一下 全局编译多重执行期上下文 概述 别小看变量声明与赋值,在所有的笔试中,基本都会考,这个要多…

JS-项目实战-鼠标悬浮变手势(鼠标放单价上生效)

1、鼠标悬浮和离开事件.js //当页面加载完成后执行后面的匿名函数 window.onload function () {//get:获取 Element:元素 By:通过...方式//getElementById()根据id值获取某元素let fruitTbl document.getElementById("fruit_tbl");//table.rows:获取这个表格…

git 命令行回退版本

git 命令行回退版本 git 命令行回退版本命令: 1.切换到需要回退的分支 git checkout branch-v2.0.02.更新远程分支 git fetch3.找到需要回退版本的版本号git revert a6914da55ff40a09e67ac2426b86f1212e6580eb4.清除工作区缓存git clean -df5.强制提交git push -f

解决Python requests库不支持发送可迭代对象的问题

在加班的路上,bug是那永远的陪伴。对于程序员来说,bug就像黑暗中的萤火虫,虽然微弱却永远指引着前进的方向。今天,我们要探讨的是Python requests库在处理可迭代对象时遇到的问题,这是一道让许多开发者头痛的难题。本文…

阿里云今年服务器是真便宜,看看哪些云服务器值得买!

2023年双十一,阿里云推出了一项令人惊喜的独家优惠活动!在这次活动中,阿里云开放了老用户购买权限,以超低的价格购买云服务器ECS经济型e实例。这款服务器配置了2核2G内存、3M固定带宽和40G ESSD entry系统盘。而且,更棒…

一个用于操作Excel文件的.NET开源库

推荐一个高性能、跨平台的操作Excel文件的.NET开源库。 01 项目简介 ClosedXML是一个.NET第三方开源库,支持读取、操作和写入Excel 2007 (.xlsx, .xlsm)文件,是基于OpenXML封装的,让开发人员无需了解OpenXML API底层API&#xf…

技巧篇:在Pycharm中配置集成Git

一、在Pycharm中配置集成Git 我们使用git需要先安装git工具,这里给出下载地址,下载后一路直接安装即可: https://git-for-windows.github.io/ 0. git中的一些常用词释义 Repository name: 仓库名称 Description(可选):…