张口就来的301，302重定向，你知道如何配置吗？

前言

很多小伙伴都知道301,302是重定向，但是面试的时候问起来是如何实现却是一头雾水，总以为这是运维搞的，不关我们前端er的事，作为大前端趋向，这些知识我们还是需要把握起来的。

一、关于3xx状态码

状态码	状态短语	状态含义
300	Multiple Choices	当请求的 URL 对应有多个资源时（如同一个 HTML 的不同语言的版本），返回这个代码时，可以返回一个可选列表，这样用户可以自行选择。通过 Location 头字段可以自定首选内容。
301	Moved Permanetly	当前请求的资源已被移除时使用，响应的 Location 头字段会提供资源现在的 URL。直接使用 GET 方法发起新情求。
302	Found	与 301 类似，但客户端只应该将 Location 返回的 URL当做临时资源来使用，将来请求时，还是用老的 URL。直接使用 GET 方法发起新情求。
304	Not Modified	资源未修改，表示本地缓存仍然可用。
307	Temporary Redirect	与 302 类似，但是使用原请求方法发起新情求。
308	Permanent Redirect	与 301 类似，但是使用原请求方法发起新情求。

其中301和308都属于永久重定向，永久重定向意味着原始 URL 不再可用，替换成了一个新的内容。所以搜索引擎、聚合内容阅读器以及其他爬虫识别这两个状态码时，会更新旧 URL 的资源。

而302/303/307 都属于临时重定向

二、常见的重定向的场景

2.1、网页HTML重定向

我们可以在网页头部的meta元素上设置http-equiv="Refresh"

<head>
  <meta http-equiv="Refresh" content="0; URL=https://www.baidu.com/">
</head>

content属性需要以数字开头，表示多少秒之后重定向到指定页面。通常我们设置为 0。

2.2 JavaScript 重定向

众所周知，用window.location可以实现用js做页面重定向，但是这个方法只在能用JavaScript的浏览器中使用。

2.3 Http重定向

在http中，如果服务器返回了一个重定向响应进行重定向并且是以3开头的状态码，里面有一个location头字段表示要重定向的位置。浏览器收到响应后会直接加载location里指定的url。

++++==以上三种重定向的方法的优先顺序是HTTP > HTML > JavaScript==++++

三、使用nginx配置重定向

nginx rewrite，主要可以实现URL地址的重写

语法： rewrite 是实现 URL 重写的关键指令，根据匹配 URL 部分的内容，重定向到目标 URL 上，结尾是 flag 标记。

rewrite 匹配URL(正则表达式) 目标URL [flag];

flag 标记的参数值：

last 本条规则匹配完成后，继续向下匹配新的 location URL 规则
break 本条规则匹配完成即终止，不再匹配后面的任何规则
redirect 返回 302 临时重定问，浏览器地址栏会显示跳转后的 URL 地址
permanent 返回 301 永久重定向，浏览器地址栏会显示跳转后的 URL 地址

redirect 和 permanent 区别：

301 永久重定向，会被浏览器记录，比如 a.com 网站 301 到 b.com 网站，浏览器输入 a.com 时，就不请求 a.com 了，而是直接请求 b.com 。
302 临时重定向，浏览器不会记录住，比如 a.com 网站 302 到 b.com 网站，浏览器输入 a.com 时，还是请求 a.com，根据 a.com 网站响应的 location 内容，再去请求 b.com 网址。

3.1 案例使用

访问www.a.com重定向到www.b.com

nginx.conf配置 

server {
    listen : 8081;
    server_name : www.a.com;
    location / {
        root : /www;
        index index.html;
    }
    rewrite ^(.*) http://www.b.com permanent; // 301永久重定向
}

配置好之后，执行 $ nginx -s reload，打开 www.a.com:8081 或 www.b.com:8081/index.html 则会自动重定向到www.b.com

3.2 如何清除301永久重定向

1、简单粗暴的方法
- 控制台禁用缓存
- 清除历史记录
- Network 面板清除缓存

2、配置nginx，通过设置缓存头来控制，比如设置Cache-Control : no-store 或者 no-cache

location / {
+ add_header Cache-Control no-store;
  # 永久重定向
  rewrite ^/original-page http://redirect.example.com/301 permanent;
  # 临时重定向
  # rewrite ^/original-page http://redirect.example.com/302 redirect;
}

在实际项目的使用过程中，一定要注意谨慎使用301，并且注意要设置缓存头，否则容易造成生产环境的灾难，从而背锅。