在调试一个接口时，看到 Response Header 中有这么一段

vary: Origin;
vary: Access - Control - Request - Method;
vary: Access - Control - Request - Headers;
content negotiation 内容协商
在客户端向服务端发送请求的时候，我们在Request Headers 中可以找到
accept: application/json, text/plain, */*
accept-encoding: gzip, deflate, br
accept-language: zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6
其中Accept分别代表的含义
请求头字段
说明
响应头字段
Accept
告知服务器发送何种媒体类型
ContentType
AcceptLanguage
告知服务器发送何种语言
ContentLanguage
AcceptCharset
告知服务器发送何种字符集
ContentType
AcceptEncoding
告知服务器采用何种压缩方式
ContentEncoding
Accept其实就是告诉服务端，客户端可以接受的格式、类型、压缩方式
所以如果服务端提供的内容是取决于请求头中的Origin字段，那么在Response Header中就会出现
Vary: Origin（为什么要包含这个头部，因为请求头中的 Origin 头部代表了该请求来源的具体域名信息，那么对于不同域名网站所发起的请求，会使用仅属于它本身的缓存。）
如果有多个字段，例如
vary: User-Agent,Cookie
则表示服务端返回的内容是基于User-Agent和Cookie请求头来生成的
根据vary标头指示值提供给客户端不同的缓存版本。
举例web中 不同的浏览器对于webp的支持程度不同， 则可以在请求中Accept中可以读取到客户端是否支持webp格式，
如果支持则返回webp，如果不支持则返回正常图片
Client Hints
HTTP Client Hints 之后，浏览器在页面发起子资源请求时，会通过新增的一系列头部字段带上分辨率、设备像素比、图片宽度等信息。
Response Header 中返回
DPR 页面分辨率比例
Device pixel ratio, the pixel density of the screen (might vary if the user has multiple screens)
Save-Data  on/off
Save-Data请求头字段是一个布尔值，在请求中，表示客户端对减少数据使用量的偏好。 这可能是传输成本高，连接速度慢等原因。
值为on时，明确表示用户选择使用客户端简化数据使用模式，并且当与源进行通信时允许他们提供替代内容以减少下载的数据，例如较小的图像和视频资源，不同的标记和样式，禁用轮询和自动更新等。
Whether the user has enabled data-saving mode
Viewport-Width
Pixel width of the current viewport
Width  物理像素
Desired resource width in physical pixels
Accept-CH: Width, Downlink, Sec-CH-UA
<meta http-equiv="Accept-CH" content="Width, Downlink, Sec-CH-UA">
BASHAccept: image/webp,image/*,*/*;q=0.8
Accept-Encoding: gzip, deflate, sdch
Accept-Language: zh-CN,zh;q=0.8,en;q=0.6,en-US;q=0.4,ja;q=0.2,de;q=0.2,zh-TW;q=0.2,cs;q=0.2,pt;q=0.2,ko;q=0.2
Connection: keep-alive
DPR: 2 // 分辨率比例
Host: qgy18.imququ.com
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.13 Safari/537.36
Viewport-Width: 1280  // 页面宽度
Width: 128 // 物理宽度
复制代码
  
分类：




    
 前端
 
 
   
相关推荐
 
  
       
36分钟前
 

        JavaScript
      
 
   同学：“这个 iframe 元素我咋获取不到啊？”
 
背景 故事起源于昨晚，我有个朋友问我了一个问题，场景是这样的。 他的页面自己写了一个 div，然后通过一些调用内嵌了一个外部的 iframe，这个 iframe 就是一个外部 ide...
 
 61
 
 
        JetTsang
      
 
27分钟前
 

        React.js
        JavaScript
      
 
   ReactContext的封装思路
 
写在最前 看官们好，我叫JetTsang，之前都是在掘金潜水来着，现在偶尔做一些内容输出吧。 引出 在React当中，做全局状态管理可能一般会想到Redux、Recoil、Zustand之类专门用于状
 
 43
 
 
      
 
37分钟前
 

      
 
   全面解析💅 Styled-Components
 
一、简介 在现代前端项目中，由于前端工程化的加入，原生 CSS 在工程化中的缺点展现了出来，复用性差、作用域和命名空间难以管理、缺乏工程能力等等。为了弥补这些缺陷，css 工程化中社区创造出了各种解决
 
 30
 
 
        JavaScript
      
 
   ahooks useRequest 手动和自动触发请求避坑总结
 
useRequest的作用 useRequest的官网是这样介绍的，它是一个强大的异步数据管理的 Hooks，React 项目中的网络请求场景使用 useRequest 就够了。
 
 88
 





    
 
        cheerioInf
      
 
   我是如何在项目中使用 Lint 工具链的？
 
为什么需要 Lint 工具链？ 统一的代码风格：尤其是在多人合作的情景下，每个开发者都有自己的代码偏好，这可能导致整体项目代码风格混乱杂糅，难以阅读，Lint 工具可以统一代码风格，如缩进、命名风格、
 
 104
 
 
        SouthernWind
      
 
   后台管理系统——解决联动效果以及面包屑导航以及添加Echarts
 
在common/config/router.js中的layout写子组件路由 之前： 现在： 把views文件夹中的格式改成以下形式方便跳转对应的链接 ​ 在shop/goods下新建list.vue
 
 92
 
 
      
 
   通过css 的 scroll-snap 实现整屏滑动
 
前言 整屏滑动是比较常见的场景，用户只需要轻轻滑动一下，即可切换整屏的内容，对用户体验， UI排版来说是很有用的，之前我们实现这个功能需要借助一些js来实现，现在仅仅只需要两个css即可轻松搞定
 
 91
 
 
        汪啊汪QAQ
      
 
   【HTTP完全注释】Connection的前世今生
 
完整手册可关注该仓库，给个✨ 该站点也会同步更新 Connection [HTTP/1.0、HTTP/1.1] 🔠取值 值 简称 说明 close 短连接 不保持网络连接，它每发起一个请求时都会创建一
 
 193
 
 
      
 
   Git从原理到实践的全面指南 | 概念篇
 
Git是一个非常强大的代码管理工具，它不仅可以让你方便地提交、推送、拉取代码，还可以让你灵活地处理各种复杂的分支、合并、冲突等问题。说到使用，相信大家都会，无非就是commit、push、pull 。
 
 133
 





    
 
        前端技术砖家
      
 
   前端没了？也许是刚开始
 
最近听说某大厂取消大前端部门，前端被拆分到各个业务组。很多前端高 P 或离职，或被裁，或转后端。 这是前端的落日？
 
 3.2w
 
 
        不叫猫先生
      
 
21小时前
 

        JavaScript
      
 
   JavaScript实现背景图像切换3D动画效果
 
给一张长图，长图中有好多个图像，图像的动作是连续的，当鼠标在容器内移动时，背景图像会随之切换，呈现出连续的动画效果，实现效果类似于3D动画，用JS怎么实现？
 
 101
 
 
        ssh_晨曦时梦见兮
        JavaScript
        Vue.js
      
 
   从尤雨溪这两天微博募捐，思考开源如何赚大钱
 
这两天，尤大在他的微博表示，他打算开启国内开源捐赠计划，截止本文发帖为止，已经有 6k / 月的固定充电了。 这个数额目前还是比较小的，企业级别的 sponsor 应该还没有出现。
 
 3.6w
 
 
        超人不会飛
      
 
23小时前
 

        JavaScript
      
 
   你应该要知道的设计模式
 
前言 整理了一下常见的设计模式 观察者模式 特点： 主题和观察者的解耦，由于不存在引用关系，使得独立地变化，互不影响。 一个主题对象可以有多个观察者对象，形成一对多的依赖关系。 简易版本主题： 简易版
 
 184
 





    
 
      
 
   SSL TLS
 
HTTPS HTTPS，全称为 Hypertext Transfer Protocol Secure，是一种通过加密通道传输数据的安全协议。它是 HTTP 协议的安全版本，用于在 Web 浏览器和 W
 
 134
 
 
        前端掘金者H
        Vue.js
      
 
   通过一个常见的业务场景彻底搞懂Vue3中的hooks
 
在开发管理后台过程中，一定会遇到不少了增删改查页面，而这些页面的逻辑大多都是相同的，如获取列表数据，分页，而不同的是呈现出来的数据项，所以我们可以封装一个通用的hooks，适配大多数列表页面。
 
 159
 
 
        JunIce
      
 
   vite 在proxy代理中更改headers
 
vite 在proxy代理中更改headers 平时我们在对接接口时，我们都是配置代理解决跨域问题 某天你明明配置好了代理，浏览器还是会有跨域问题报错 查看response header, 你会发现 
 
 1781
 
 
        JunIce
      
 
   你为什么需要用pnpm了
 
npm yarn 和 pnpm 区别 pnpm 是最近一段时间刚刚出来的包管理工具，官方文档地址 https://www.pnpm.cn/ 一出来就受到很多开源项目使用，star数也突破13k 这里研
 
 1536
 
 
        JunIce
      
 
   Arcgis Js v3 常用API笔记——Map
 
Arcgis Js常用API整理 Map Map即ArcGIS中地图类，每个应用中一个地图即对应一个地图实例 options basemap : string 对应的基础地图 可选值 这些都是 arc
 
 1143
 
 
        JunIce
      
 
   制作官网元素飞入动画库 AOS.js 源码解读
 
AOS 源码解读 项目中有个需求是官网浏览时，滚动鼠标，相对应的元素会以动画的形式加载到对应的位置。看到这个需求我第一印象就是window下有个MutationObserver这个api，可以监听对应
 
 941
 
 
        JunIce
        JavaScript
      
 
   Amd Umd Cmd CommonJS 区别和联系
 
CommonJS CommonJs 加载模块使用require方法， node.js采用了这个规范 AMD AMD 是 RequireJS 在推广过程中对模块定义的规范化产出 require.js 浏
 
 1104
 
 
          
 
 
  
 
 
友情链接：
 

    JunIce
        VIP.5 如鱼得水