• 技术文章 >web前端 >js教程

    【整理总结】前端必知必会的几个实用响应头

    青灯夜游青灯夜游2022-09-14 19:43:07转载309

    大前端零基础入门到就业:进入学习

    阅读本文,你将:

    学习 响应头 很重要吗?

    真的很重要。

    不信你看看下面的场景,眼熟不?

    一、预览、下载 让人操碎了心?

    1.1 场景

    我不止一次听到同事、群友们讨论这个问题:

    “后端提供了一个 txt(或者 pdf/'json' 等)文件的下载 url,可以当我用 a 标签打开时,却变成了预览……怎么办?救!!!”

    此时,就会有人上去推荐 FileSaver.js 或者 “手写读流另存为”。

    然后还有人附和...

    我:???

    1.png

    这是需要写代码才能解决的问题吗?

    如果你有了解过 Content-Disposition 这个 Response Header,那你一定知道,只需要响应头上增加一行,问题就能迎刃而解。

    1.2 介绍

    Content-Disposition:这个响应头可以决定内容是 预览 还是 下载

    它支持三种格式的值:

    注:如果需要预览,需要配合适当的 Content-Type 食用;

    1.3 示例

    为此,我特意写了一个 express 小示例。

    大抵是在 express 应用下写了三个路由,如下:

    const user = {
      name: "摸鱼的春哥",
      blogUrl: "https://juejin.cn/user/1714893870865303"
    }
    
    const contentDispositionInline = async (req, res, next) => {
      res.setHeader('Content-Disposition', 'inline')
      res.send(user)
    }
    
    const contentDispositionFilename = async (req, res, next) => {
      res.setHeader('Content-Disposition', 'attachment; filename="chunge.json"')
      res.send(user)
    }
    
    const contentDispositionNoFilename = async (req, res, next) => {
      res.setHeader('Content-Disposition', 'attachment')
      res.send(user)
    }

    然后我分别访问三个路由,效果差异:

    2.png

    二、项目升级了,需要客户 清空缓存 ?

    2.1 场景

    实施:“客户反馈Bug 还是没修复。”
    你:“哥,真修复了,要不你让客户清一下缓存?”
    实施:“啊?客户说他不会清……”
    ……

    永远不要期望你的客户会进行 “那些研发才懂” 的操作。也不要把你的问题,归因到 浏览器缓存 上。

    浏览器缓存 是被发明出来优化用户体验的,并不是被发明出来阻碍用户的。

    因此,理解如何使用 Cache-Control 这个响应头,是前端的必知技能。

    2.2 介绍

    Cache-Control:用来指定缓存机制。

    缓存,作为前端八股文必考知识,相信大家已经耳熟能详。 常见的 Cache-Control 属性如下:

    Response Header属性含义
    cache-controlno-store不缓存,这个会让客户端、服务器都不缓存,也就没有所谓的强缓存、协商缓存了。
    cache-controlpublic表明响应可以被任何对象(包括:发送请求的客户端,代理服务器,等等)缓存,即使是通常不可缓存的内容。(例如:1.该响应没有max-age指令或Expires消息头;2. 该响应对应的请求方法是 POST 。)
    cache-controlprivate表明响应只能被单个用户缓存,不能作为共享缓存(即代理服务器不能缓存它)。私有缓存可以缓存响应内容,比如:对应用户的本地浏览器。
    cache-controlmax-age=<1000>设置缓存存储的最大周期,超过这个时间缓存被认为过期(单位秒)。与Expires相反,时间是相对于请求的时间。

    2.3 实际生产如何运用?

    三、我的 Cookie 不可能这么可爱!

    3.1 场景

    "春哥春哥,为啥我登录成功了,请求还是 401 ?"

    "春哥春哥,为啥我存进 cookie 的值取不到?"

    "春哥春哥,这破 cookie 是不是坏了,浏览器里看明明有值,为啥我访问不了?"

    我:“兄弟,你有了解过一个叫 set-cookie 的响应头吗?”

    3.png

    是它!是它!就是它!关于 cookie 的各种异常,全靠它!

    3.2 介绍

    Cookie 曾经是 Web 开发无法绕开的一道门槛,而现在它的存在感越来越弱,但海量的存量项目并不会因为技术的趋势而消失,它们依然很有价值,依然需要维护。

    set-cookie 响应头正是 Cookie 体系中最为核心的 第一主角

    Set-Cookie: 是一个响应头,服务端赋值,让浏览器端产生 Cookie,并限定 Cookie 的各种特性。

    这些特性就包括:

    3.3 开发常见问题分析

    (学习视频分享:web前端

    以上就是【整理总结】前端必知必会的几个实用响应头的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:掘金社区,如有侵犯,请联系admin@php.cn删除
    专题推荐:javascript 前端 vue.js Vue
    上一篇:浅析Node处理CPU密集型任务的方法 下一篇:简单了解JavaScript变量or循环中的var和let
    VIP课程(WEB全栈开发)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• 【整理分享】VSCode开发vue项目必装的插件• 一文聊聊Vue中的常用内置指令【大全】• 实例详解,带你玩转 Vue 动画• Vue实战:利用自定义指令实现鼠标拖动元素效果• 9个vue3开发技巧,提升效率帮助你早点下班!
    1/1

    PHP中文网