左小白的技术日常
Github

HTTP 301 和 302 状态码的区别以及它们在浏览器和搜索引擎中的处理

这篇文章发布于 2021/01/12,归类于
标签:
301与302区别

301 和 302 状态码都是表示页面重定向,它们有两个用处:一是告诉浏览器,访问当前页面时需要跳转到新的页面。二是告诉搜索引擎如何正确的处理页面收录、索引。同样是发送 HTTP 请求,接收响应内容,浏览器对重定向页面的处理流程和普通页面有什么区别呢?一般访问某个页面时,基本流程如下:

  1. 客户端(浏览器)发起请求 在浏览器中访问某个页面时,会向该页面资源所在的 URL 发送一个 HTTP 请求。
  2. 服务端处理请求并响应 服务器接收到请求后,会将资源的数据响应给前端,一般响应状态码 status 为 200,响应内容为 html 文本。
  3. 客户端(浏览器)处理 客户端接收到响应后,看状态码是否是 200 或 304(资源未修改),如果是就将浏览器返回的 html 内容解析、绘制在浏览器窗口中。

上面是简化版的普通页面打开流程,301 和 302 重定向的处理一般从第 2 步开始,服务器接收到请求后,我们需要自己加判断逻辑:

浏览器接收到响应后,当发现响应状态码 status 为 301 或 302 时,会将页面跳转(重定向)到 Location 响应头里设置的 url。下面是使用 koa 在服务端对 301 的实现,参考 nginx以及koa实现301跳转:xx.com重定向到www.xx.com - 左小白的技术日常

const Koa = require('koa')
const app = new Koa()

app.use((ctx) => {
  console.log(ctx.url)
  if (ctx.url === '/test') {
    // 当访问 /test 时 301重定向到 http://www.zuo11.com
    ctx.status = 301
    ctx.set({
      'Location': 'http://www.zuo11.com'
    })
    return
  }
  // 非 /test 时,页面显示 welcome
  ctx.body = 'welcome'
})

app.listen('9000', () => { console.log('服务已开启,9000端口') }) 

对浏览器来说,301 和 302 都是从一个 url 跳转到另一个新的 url,基本没啥区别。但对搜索引擎来说,如果是 301 永久性重定向,页面会删除失效的 url 收录、索引,并替换为新的 url。对于 302 的情况,搜索引擎会保留原 url 的收录和索引,并新增新 url 的收录、索引,这样更有利于页面的程序化处理。