HTTP中的301、302实现重定向

news/2024/9/22 18:04:46/

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/news/1528945.html

相关文章

力扣718-最长重复子数组(Java详细题解)

题目链接&#xff1a;718. 最长重复子数组 - 力扣&#xff08;LeetCode&#xff09; 前情提要&#xff1a; 因为本人最近都来刷dp类的题目所以该题就默认用dp方法来做。 dp五部曲。 1.确定dp数组和i下标的含义。 2.确定递推公式。 3.dp初始化。 4.确定dp的遍历顺序。 5…

硬件(驱动开发概念)

驱动程序开发 裸机驱动&#xff08;无操作系统&#xff09; Linux驱动 以计算机技术为基础&#xff0c;在软件和硬件层间可以被剪裁的专业硬件计算机系统 SOC&#xff1a;片上系统 Kernel&#xff1a;内核 x86 &#xff08;CISC:complex instruction set computer 复杂指令…

【Proteus仿真】基于51单片机的L298N电机电速调节

目录 一、主要功能 二、硬件资源 三、程序编程 四、实现现象 一、主要功能 基于51单片机&#xff0c;L298N电机驱动连接电机&#xff0c;采用调节PWM占空比来控制电机速度转动。 仿真图&#xff1a; 编辑 二、硬件资源 基于KEIL5编写C代码&#xff0c;PROTEUS8.15进行…

图卷积网络(GCN)与图注意力网络(GAT)基础实现及其应用

创作不易&#xff0c;您的打赏、关注、点赞、收藏和转发是我坚持下去的动力&#xff01; 图卷积网络&#xff08;Graph Convolutional Networks, GCN&#xff09;是一种能够直接在图结构数据上进行操作的神经网络模型。它能够处理不规则的数据结构&#xff0c;捕获节点之间的依…

负载均衡服务由几部分组成?分别是什么

负载均衡服务由几部分组成?分别是什么&#xff1f;均衡服务通常由六部分组成&#xff0c;分别是客户端、负载均衡器、后端服务器、负载均衡算法、监控和健康检查及会话保持。这六者互相协同工作&#xff0c;实现了流量的有效分发和系统的高可用性。这种结构不仅提高了系统的容…

opc服务器与opc服务器如何通讯

OPC&#xff08;OLE for Process Control&#xff0c;即过程控制对象链接&#xff09;是一种工业自动化领域常用的通讯协议&#xff0c;它提供了一种标准化的方式&#xff0c;使得不同厂家的设备可以互相通讯。OPC服务器是运行在计算机上的软件程序&#xff0c;用于接收和处理来…

深度学习-从零基础快速入门到项目实践,这本书上市了!!!

此书地址&#xff1a; 《【2024新书】深度学习 从零基础快速入门到项目实践 文青山 跟我一起学人工智能 机器学习算法原理代码实现教程 深度学习项目分析 深度学习 从零基础快速入门到项目实践》【摘要 书评 试读】- 京东图书 除深度学习外我还写了一本软件测试书。我大概是国…

音频左右声道数据传输_2024年9月6日

如下为音频数据传输标准I2S总线的基本时序图 I2S slave将I2S master发送来的左右声道的串行数据DATA转变为16bit的并行数据 WS为左右声道选择信号&#xff0c;WS高代表左声道&#xff0c;WS低代表右声道; WS为高和为低都持续18个周期&#xff0c;前面16个周期用来传输数据。 I2…