[头参数]09 - 重定向

目录

1. 测试响应码302
2. 更改响应码后，测试浏览器是否仍会跳转
3. 测试响应码301
4. 测试301的永久存储

0. 概述

1. 跳转的状态码通常使用302和301。
2. 302是临时跳转，浏览器不会对页面进行缓存，意味着每次都会请求两次后端。
3. 301是永久跳转，浏览器第一次会请求两次后端，然后将永久跳转的页面缓存，时间尽可能的长。（慎用301响应码，因为这个操作是不可由开发人员更改的，如果用户不清理浏览器缓存，用户永远会访问第一次设定的url）。
4. 跳转使用的响应头的参数为Location

1. 测试响应码302

• 代码

1. 如果路由是/，则设置Location参数进行跳转。
2. 如果路由是/redirect，则返回字符串。

/**
 * 使用302状态码测试临时重定向
 */
const http = require('http')
const port = 9000

http.createServer(function(request, response) {
  switch(request.url) {
    // 使用Location
    case '/': {
      response.writeHead(302, {
        'Content-Type': 'text/plain',
        'Location': 'redirect'
      })
      response.end('It is root')
      break
    }
    case '/redirect': {
      response.writeHead(200, {
        'Content-Type': 'text/plain'
      })
      response.end('It is redirect')
      break
    }
  }
}).listen(port)

console.log(`listen ${port}`)

• 测试

1. 输入根目录localhost:9000/
   

2. 更改响应码后，测试浏览器是否仍会跳转

• 代码

1. 将根路由中的响应码更改为200

case '/': {
  // 测试2: 200时的代码
  response.writeHead(200, {
    'Content-Type': 'text/plain',
    'Location': 'redirect'
  })

  response.end('It is root')
  break
}

• 测试

1. 响应码变为200，仍有Location参数

   
   

2. 但是不再进行跳转，所以Location需要与响应码配合使用，才能完成跳转。
   

   

3. 测试响应码301

• 更改响应码为301

case '/': {
  // 测试1: 301时的代码
  response.writeHead(301, {
    'Content-Type': 'text/plain',
    'Location': 'redirect'
  })

  response.end('It is root')
  break
}

• 测试

1. 现在响应码变为了301，第一次仍会请求两次

   
   

2. 第二次则直接从缓存中获取根目录了

   
   

4. 测试301的永久存储

• 修改代码

1. 访问根路由不再进行跳转

case '/': {
  // 测试2: 不重定向的代码
  response.writeHead(200, {
    'Content-Type': 'text/plain',
  })

  response.end('It is root')
  break
}

• 测试

1. 浏览器仍进行了跳转

   
   

2. 清楚浏览器缓存后，不再进行跳转