当前位置：首页 > news >正文

HTTP中的301、302实现重定向

news 来源：原创 2024/9/24 12:27:34

HTTP状态码301和302描述

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

301

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

302

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

在实际应用中，301和302重定向的实现可以通过服务器配置、HTTP响应头中的Location字段来实现。例如，在Express.js框架中，可以通过res.redirect()方法来实现重定向，指定状态码（301或302）和目标URL。此外，这两种重定向方式各有其特点和适用场景，正确运用它们可以有效维护网站的可访问性和用户体验，但需要注意避免过度使用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或者 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并不会控制页面如何跳转，最终跳转还是依赖前端自己控制

总结：

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