HTTP中的301、302实现重定向

server/2024/12/22 2:11:09/

301302_0">HTTP状态码301302描述

‌HTTP状态码301302用于实现重定向‌,其中301代表永久重定向,而302代表临时重定向。这两种重定向方式在网页开发、搜索引擎优化(SEO)以及用户体验方面扮演着重要的角色。

301_3">301

  • 301永久重定向‌意味着原来的URI(统一资源标识符)不再使用,应该使用新的URI。当浏览器或搜索引擎爬虫接收到301状态码时,它们会更新其记录,将来的请求将直接使用新的URI,从而避免了不必要的跳转,提高了访问效率。这种重定向主要用于网站结构调整、URL规范化、网站迁移等场景,有助于保持搜索引擎对网站的访问,同时避免404错误和权重分散。

302_6">302

  • 302临时重定向‌则表示原来的URI暂时不可用,但仍然有效,只是临时地使用新的URI。这种重定向主要用于网站短期的改版、维护或URL的临时变化。虽然302ZhongDingXiang.html" title=302重定向>302重定向不会更新浏览器的历史记录和搜索引擎的索引,但它允许用户或搜索引擎在稍后再次尝试时使用原始URI,这对于需要暂时中断访问但又希望保留原始链接有效性的场景非常有用。

在实际应用中,301302ZhongDingXiang.html" title=302重定向>302重定向的实现可以通过服务器配置、HTTP响应头中的Location字段来实现。例如,在Express.js框架中,可以通过res.redirect()方法来实现重定向,指定状态码(301302)和目标URL。此外,这两种重定向方式各有其特点和适用场景,正确运用它们可以有效维护网站的可访问性和用户体验,但需要注意避免过度使用302ZhongDingXiang.html" title=302重定向>302重定向,以免对网站的SEO产生负面影响‌。

以下内容来自掘金, 链接如下:
https://juejin.cn/post/6844904163847962638
该篇为个人学习总结和笔记

在Express.js中实例

express中有语法糖,直接使用

由a链接触发重定向

app.js

const express = require('express')
const app = express()
const router = express.Router()// 演示通过页面跳转的方式进行重定向,无需前端操作router.get('/api/passToPageRedirect', (req, res) => {// 这里的 res.redirect(响应状态码可以是301,302, 要重定向的地址)res.redirect(302, 'http://localhost:3000/liuyan.html')res.end()
})app.listen(3000, ()=> {console.log('http://localhost:3000')
})

前端代码如下

<a href="/api/passToPageRedirect">跳转</a>
<form action="/api/passToPageRedirect" method="get"><button type='submit'>表单触发页面跳转</button>
</form>

a链接和 表单的提交,触发的默认行为,都会刷新页面,都能进行重定向操作

在触发301或者 302ZhongDingXiang.html" title=302重定向>302重定向以后,页面刷新,控制台中的 network面板中,可以看到请求的过程
在这里插入图片描述
而此时的 页面地址,已经是liuyan.html
在这里插入图片描述

通过接口触发重定向

如果调用GET、或者POST接口,然后后台进行重定向操作,其实express只会给你在响应头加一个Location字段,前端必须拿到Location 然后,自己通过 window.location.href = Location地址 跳转

app.js

const express = require('express')
const app = express()
const router = express.Router()// 使用Location进行重定向router.get('/api/passToAPIRedirect', (req, res) => {res.location('http://localhost:3000/liuyan.html')res.end()})app.listen(3000, ()=> {console.log('http://localhost:3000')
})

前端代码

<script src="/plugins/jquery.js"></script><script>$.ajax({url: '/api/passToAPIRedirect',success(res, stauts, xhr) {console.log(xhr.getAllResponseHeaders())window.location.href = xhr.getResponseHeader('Location')},error(err) {console.log(err)}})</script>

在success响应函数体内,我们可以获取到服务器返回的响应头部添加的属性 Location
在这里插入图片描述

使用window.location.href=Location地址 手动调用一下,我们是不会在看到跳转以后的liuyan.html页面的控制台看到 /api/passToAPIRedirect 接口的详细信息,因为已经没了,页面刷新了

无论是哪一种方式,都是可以实现重定向,但是上面的方式,使用时一定不能用错位使用, 因为express并不会控制页面如何跳转,最终跳转还是依赖前端自己控制

总结:
  1. 使用 301302ZhongDingXiang.html" title=302重定向>302重定向,要页面自己使用a,form表单 触发默认行为
  2. 使用location手动进行页面跳转,需要前端自己获取响应头中的Location字段值,然后调用 window.location.href 跳转
  3. 2种方式,在控制台中看到的效果是不同的,window.location.href在跳转以后,看不到请求接口的详细信息, 301302的依旧可以在liuyan.html目标页面中看的到信息

http://www.ppmy.cn/server/122270.html

相关文章

Python模拟真人鼠标轨迹算法

一.鼠标轨迹模拟简介 传统的鼠标轨迹模拟依赖于简单的数学模型&#xff0c;如直线或曲线路径。然而&#xff0c;这种方法难以捕捉到人类操作的复杂性和多样性。AI大模型的出现&#xff0c;能够通过深度学习技术&#xff0c;学习并模拟更自然的鼠标移动行为。 二.鼠标轨迹算法实…

安全类面试题

1、简述ASA 防火墙CONN 表五元组的内容 源 IP地址、目的 IP地址、源端口号、目的端口号、TCP/UDP 协议 2、 ASA 防火墙 inside和outside 接口之间访问时&#xff0c;遵从的默认规则 允许出站&#xff08;outbound&#xff09;连接、禁止入站&#xff08;inbound&#xff09;连…

「漏洞复现」某徳知识产权管理系统 UploadFileWordTemplate 文件上传漏洞

0x01 免责声明 请勿利用文章内的相关技术从事非法测试&#xff0c;由于传播、利用此文所提供的信息而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c;作者不为此承担任何责任。工具来自网络&#xff0c;安全性自测&#xff0c;如有侵权请联系删…

JDBC 事务

文章目录 准备数据JDBC操作事务API介绍案例代码小结 准备数据 # 创建一个表&#xff1a;账户表. create database day05_db; # 使用数据库 use day05_db; # 创建账号表 create table account(id int primary key auto_increment,name varchar(20),money double ); # 初始化数据…

正向科技|格雷母线定位系统的设备接线安装示范

格雷母线安装规范又来了&#xff0c;这次是设备接线步骤 格雷母线是格雷母线定位系统的核心部件&#xff0c;沿着移动机车轨道方向上铺设&#xff0c;格雷母线以相互靠近的扁平状电缆与天线箱电磁偶合来进行信号传递&#xff0c;从而检测得到天线箱在格雷母线长度方向上的位置。…

linux-性能优化命令

top 我们先来说说top命令用法&#xff0c;这个命令对于我们监控linux性能是至关重要的&#xff0c;我们先来看看展示结果。 top - 15:20:23 up 10 min, 2 users, load average: 0.39, 0.53, 0.35 Tasks: 217 total, 1 running, 216 sleeping, 0 stopped, 0 zombie %C…

计算机视觉的应用35-深入探讨缺陷检测传统OpenCV算法与深度学习算法的区别

大家好&#xff0c;我是微学AI&#xff0c;今天给大家介绍一下计算机视觉的应用35-深入探讨缺陷检测传统OpenCV算法与深度学习算法的区别。本文主要探讨了缺陷检测领域中传统算法与深度学习算法的区别。首先&#xff0c;文章详细介绍了两种算法的原理&#xff0c;对比了它们的优…

SAP调用发起泛微OA流程

SAP调用泛微Servlet接口&#xff0c;发起流程 编写servlet接口&#xff0c;给SAP调用 public class SAPCreateWorkflow extends HttpServlet{private static final long serialVersionUID 1L;public void doPost(HttpServletRequest request, HttpServletResponse response)…