HTTP Header & Status Code 心得

整理内容来自 偷米骑巴哥

Why Learn?

前后端经常合作，必须听懂他们的语言釐清责任归属了解浏览器运作原理

HTTPS

SSL 加密简单来说就是用加密演算法以混淆输送中的资料，防止骇客资料在连线发送时被拦截破解。什么是 SSL、TLS 以及 HTTPS？

HTTP Header (传送内容以外的资讯)

当发送 GET/POST 请求后，除了资料内容之外，还需附上表头来纪录各种资料/设定HTTP Header Wiki一定放在内容前面内容格式 (图档、文字)内容大小 可用来推估下载要耗多久时间多久过期 快取机制

HTTP Body (资料内容)

存放内容: HTML,JS,图档...等内容不一定是HTML，但HTML一定是内容之一

如何查看 Header

Chrome DevTools / Network Tab重新整理后，每个档案皆为请求右侧有 Headers / Preview / Response 可查看Preview 会以浏览器能解析的方式呈现Response 则将内容以纯文字呈现Headers view source 可看更多细节

Fiddler (监控HTTP工具)

监控电脑所发送/接收的 HTTP Request 内容下载于最下面

GET / POST

GET: 有限制大小 (明信片)GET 会将要传递的参数写在网址上

Ex: url/?h1=zh-TW&pli=1 (用&连结不同参数)

POST: 会将要传的参数写在 Content (包裹)

HTTP Header 种类

Request Header 客户端要求伺服器时传送Response Header 伺服器回应客户端时传送有发送请求，就必会有回应 (只要伺服器正常运作)

共通 Header 设定

Request & Response Header 都会有的共通设定Request Method : GET/POSTStatus Code: 状态码Date: 浏览器/伺服器 当前时间Upgrade: 升级到另外一个协定 (Ex: websocket)Content-Type: 指传送内容的格式 (常见格式如下)Content-length: 传送内容大小 (可用于计算下载耗时/进度)Content-Encoding: 内容压缩格式 (通常为 gzip)

    // 一般表单栏位    application/x-www-form-urlencoded     // 档案上传    multipart/form-data; boundary=--xxx     // JSON资料    application/json     // 纯文字    text/plain 

WebSocket (双向沟通)

Header 传送 Upgrade: websocket伺服器回应 101 切换协定建立一个保持连线的状态，连线会更即时、更快速建立双向的通道，可任意的作资料传递即不需要送一个 request 即回一个 response，可一直丢伺服器能承受的连线数量要很高，通常会作 load balance

Request Header

Request URL 请求资源的位置

Host: 浏览器存取的 Host 名称 (不可省)
因为一个IP可以绑定多个 Domain，必须知道要对应的伺服器。

User-Agent: 浏览器名版本 & 作业系统名版本

Connection: keep-alive (保持连线不断掉)
建立&关闭连线相当耗时，保持连线，减少重新连接TCP次数，可以有效提高传输效率。

If-Modified-Since: 快取时间 (用来判断是否要更新内容)

Cookie (每次请求都会发送浏览器的cookie，下详)

Authorization HTTP连线的身分验证

Referer: 纪录浏览器前一个页面的网址
可用于行销，来判断从哪里点入的 (不可靠，可被串改)

    // Accept 类可用 q=0.5 来配置优先取得的权重    Accept: text/html (能接受档案类型)    Accept-Language: zh-TW (能接受的语言)    Accept-Encoding: gzip (能支援的压缩格式)

Cookie

用来纪录状态 (Ex:登入)每一个 request 都会传送一份 cookie 回伺服器 (即使传图片也会传)因此 cookie 不要设太大，不然会造成资源浪费LocalStorage 则不会被传送到伺服器去，用来放不需要回传给伺服器的资料

Response Header

Etag: 产生档案的 Hash Code，纪录档案是否变更Last-Modified: 回传档案修改的时间 (原理同 If-None-Match)

    // Etag 会做的事    要求浏览器请求时回传 If-None-Match 的 Header     If-None-Match 会根据 Hash Code 判断档案是否有更动    没有改变: 回传304(叫他使用快取的内容)，回传不包含 content    有改变:   回传200，给予新的内容

Catch-Control: 快取档案的策略
max-age 设定该档案有效的快取秒数，过期则要求新的
no-cache 不使用快取Location: 当状态码是301或302时，浏览器重新导向的目标位置Content-Disposiiotn: 让浏览器可以打开下载视窗并且指定档案名称

 Content-Disposiiotn:attachment; filename="test.zip" 

Set-Cookie: 把 cookie 设定在浏览器上面
当下一次request的时候，会将 cookie header送回 server端X-Frame-Options 可以避免自己的网页被放在别人的iframe裏面 (需同网域才可放)Access-Control-Allow-Origin (允许跨域存取的网域名称)
全部的网域使用 * 代表
script & link 不再此限 (因此JSON可实现跨域存取)

同源政策

代表 无法从 A网站 去存取 B网站的 JSON档解1: 后端设定 Access-Control-Allow-Origin Header (推荐)解2: JSONP (将 JSON 转换成 JavaScript) (较少用)

HTTP 1.1 快取机制

初探 HTTP 1.1 Cache 机制