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

·  阅读 808

前言

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

一、关于3xx状态码

状态码状态短语状态含义
300    Multiple Choices当请求的 URL 对应有多个资源时(如同一个 HTML 的不同语言的版本),返回这个代码时,可以返回一个可选列表,这样用户可以自行选择。通过 Location 头字段可以自定首选内容。
301Moved Permanetly当前请求的资源已被移除时使用,响应的 Location 头字段会提供资源现在的 URL。直接使用 GET 方法发起新情求。
302Found与 301 类似,但客户端只应该将 Location 返回的 URL当做临时资源来使用,将来请求时,还是用老的 URL。直接使用 GET 方法发起新情求。
304Not Modified资源未修改,表示本地缓存仍然可用。
307Temporary Redirect与 302 类似,但是使用原请求方法发起新情求。
308Permanent 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:8081www.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,并且注意要设置缓存头,否则容易造成生产环境的灾难,从而背锅。

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改