80.http header

最近在项目中遇到了一个vue项目发版之后用户需要手动刷新浏览器才能重新访问系统的问题，不刷新的话，用户行为表现为：点击系统菜单点不动。
原因追溯：
因为vue项目在重新打包之后，没有更新的包会用之前的，更新后的包会被删掉，因此在用户没有刷新页面的情况下控制台会包一个Uncaught SyntaxError:Unexpected token <的错误。知道原因是因为浏览器缓存了打包文件导致的，但是在解决的过程中，看请求头以及判定缓存等真的被搞得头大。因此就花时间来分析一下一个完整的请求头作为记录。

一个完整的url:

image.png
General
general：里面显示的时一些接口的基础信息
Request URL:完整的请求的url
Request Method:请求类型
Status Code:请求返回的状态码 200代表成功
Remote Address:域名映射为ip的一个地址
Referrer Policy:strict-origin-when-cross-origin 用来监管和限制哪些访问来源信息会在referer中发送

• strict-origin-when-cross-origin：对同等安全级别的情况下，发送文件的源作为引用地址(https->https)，但是在降级的情况下不会发送。

  
  image.png

Request Headers

• Accept：服务端可接收的文件类型

• Accept-Encoding：客户端能够理解的编码方式.gzip和deflate（一种压缩算法），gzip是用的deflate压缩算法。

• Accept-Language：客户端支持的语言

• Cache-Control：max-age=0

• Connection：keep-alive 保持长连接

• Cookie：服务端登录信息

• Host：请求域名

• If-Modified-Since：资源有修改时返回新的资源，未修改时返回304状态码。只支持get和head请求。和If-none-match一起出现时If-none-match优先级较高

• If-None-Match：和Etag配合使用，根据etag来判断资源是否更新

• Upgrade-Insecure-Requests：告诉服务器，客户端优先选择加密及带有身份验证的响应

• User-Agent：操作系统，浏览器内核以及版本信息
  其他常见

• Authorization：服务端验证
  

  image.png
  Response Header:

• Access-Control-Allow-Credentials: true.响应信息是否可以暴露给页面。Credentials可以是 cookies, authorization headers 或 TLS client certificates。

• Access-Control-Allow-Origin：设置同域资源共享

• Access-Control-Expose-Headers: X-Custom-Header。哪些首部可以作为响应的一部分暴露给外部

• Connection: keep-alive长连接

• Content-Encoding: gzip开启gzip压缩

• Content-Type: text/html返回的内容类型

• Date: Wed, 30 Mar 2022 08:49:42 GMT，返回响应的时间

• Etag: W/"6244099a-2e21" 用于标识资源是否更新的标识符

• Last-Modified: Wed, 30 Mar 2022 07:41:14 GMT 最后修改时间

• Server: nginx/1.16.0 请求服务器信息

• Transfer-Encoding: chunked 数据传给用户时用的编码格式。数据以块的形式发送

• Vary: Accept-Encoding 对于后续请求应该用一个缓存的回复还是向源服务器请求一个新的回复。

参考1