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

这篇文章发布于 2021/01/12，归类于

标签：

301与302区别

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

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

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

如果访问的 url 已失效，之后这个 url 可能会无法访问，需要跳转到新的 url，我们需要告诉浏览器我们的这种想法。可以将响应状态码设置为 301（Permanently Moved 永久性重定向 [ˈpɜːmənəntli]），并将 Location 响应头部设置为需要跳转的新 url。
如果访问的 url 没有失效，之后这个 url 还是可以访问，当前只是希望访问该 url 时临时跳转到一个新的 url。可以将响应状态码设置为 302（Temporarily Moved 临时性重定向 [ˈtemprərəli]），并将 Location 响应头部设置为需要跳转的新 url。

浏览器接收到响应后，当发现响应状态码 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 的收录、索引，这样更有利于页面的程序化处理。

在 GitHub 上编辑本页