【笔记-http】《imooc-http协议原理+实践 web开发工程师必学》

待我称王封你为后i 2021-11-15 13:02 209阅读 0赞

<table> 
 <tbody> 
  <tr> 
   <td> 20190731-20190806：《imooc-http协议原理+实践 web开发工程师必学》</td> 
  </tr> 
 </tbody> 
</table>

### 第01章 课程导学 ###

##### 01-01 导学 #####

一、缓存  
1、客户端缓存  
2、代理服务器缓存  
2、缓存如何验证可用性  
二、深入到tcp  
1、什么是三次握手  
2、https链接的创建过程，以及为什么https就是安全的  
3、什么是长链接，为什么需要长链接  
4、http2的信道复用又为什么能提高性能  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ_size_16_color_FFFFFF_t_70]

### 第02章 http协议基础及发展历史 ###

##### 02-01 5层网络模型介绍 #####

一、经典五层模型  
1、应用层：为应用软件提供了很多服务，构建于tcp协议之上，屏蔽网络传输相关细节。  
（1）http，ftp…  
2、传输层：向用户提供可靠的端到端（end-to-end）服务  
（1）如tcp，udp  
（2）传输层向高层屏蔽了下层数据通信的细节  
3、网络层：为数据在结点之间传输创建逻辑链路。  
4、数据链路层：在通信的实体间建立数据链路连接。  
5、物理层：定义物理设备如何传输数据。  
（1）如电脑硬件，网卡端口，网线，光缆。

##### 02-02 http协议的发展历史 #####

一、http/0.9  
1、只有一个命令get  
2、没有header等描述数据的信息  
3、服务器发送完毕，就关闭tcp连接  
二、http/1.0  
1、增加了很多命令，post、put等  
2、增加了status code 和header  
3、多字符集支持，多部分发送、权限、缓存等  
三、http/1.1  
1、持久连接  
2、pineline，发送的请求可以在同一个链接中发送多个，服务端是一个一个返回的  
3、增加host和其他一些命令  
四、http2  
1、所有数据以二进制传输  
2、同一个连接里面发送多个请求不再需要按照顺序来。  
3、头信息压缩以及推送等提高效率的功能

##### 02-03 http三次握手 #####

一、tcp connection  
1、http只有请求和响应的概念，没有连接的概念。  
2、一个tcp连接可以发送多个http请求。  
3、三次握手  
（1）防止服务器开启一些无用的连接。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ_size_16_color_FFFFFF_t_70 1]  
二、wireshark抓包：网络层、tcp层、http层都可以抓到  
charles是抓到http层。

##### 02-04 URI 、URL、 URN #####

一、URI  
1、Uniform Resource Identifier 统一资源标识符  
2、用来唯一标识互联网上的信息资源  
3、包含URL、URN  
二、URL  
1、Uniform Resource Locator 统一资源定位符  
2、[http://user:pass@host.com:80/path?query=string\#hash][http_user_pass_host.com_80_path_query_string_hash]  
3、此类格式的都叫做url，比如ftp协议。  
三、URN  
1、Uniform Resource Name，永久统一资源定位符  
2、在资源移动之后还能被找到。  
3、目前还没有非常成熟的使用方案。

##### 02-05 #####

一、![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ_size_16_color_FFFFFF_t_70 2]  
二、http方法  
1、用来定义对于资源的操作  
2、常用有get、post等  
3、从定义上讲有各自的语义，get、post、delete等  
4、定义服务器对请求的处理结果  
5、各个区间的code有各自的定义，200、404、500等  
6、好的http服务可以通过code判断结果

##### 02-06 创建一个最简单的web服务 #####

一、gitbash，windows用户可以安装gitbash，比windows自带的命令行好用。类似于mac的terminal

const http = require('http');
    http.createServer(function(request, response) {
    	console.log('request come', request.url);
    	response.end('123')
    }).listen(8888);
    console.log('server listening 8888')

### 第03章 http各种特性总览 ###

##### 03-01 认识http客户端 #####

一、浏览器是最常用的http客户端。  
二、查看http请求, terminal  
1、curl [baidu.com][]。curl只是发送请求，并返回，不会对页面进行渲染  
2、curl [www.baidu.com][]  
3、curl -v [www.baidu.com][]  
可以看到dns解析后的ip地址。

##### 03-02 cors跨域请求的限制与解决 #####

一、img, link, script标签请求时，允许跨域  
二、跨域  
1、允许的方法  
允许：get、head、post  
不允许put，delete  
2、允许的Content-Type  
允许：text/plain、multipart/form-data、application/x-www-form-urlencoded  
3、其他限制  
（1）请求头限制  
允许：Accept、Accept-Language等  
（2）XMLHttpRequestUpload对象均没有注册任何事件监听器  
（2）请求中没有使用ReadableStream对象  
三、  
1、

'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Headers': 'X-Test-Cors',
    'Access-Control-Allow-Methods': 'POST, PUT, Delete',
    'Access-Control-Max-Age': '1000' // 1000秒之内，直接发送正式请求就行，不用发送预请求

2、预请求，通过method：options来获取服务端允许的认可，然后实际发送请求

##### 03-04 缓存头Cache-Control #####

一、缓存头  
1、可缓存性  
public  
private：只有发起请求的浏览器，才可以进行缓存。  
no-cache：可以在本地进行一个缓存，可以在proxy服务器进行缓存，每次需要先去服务器验证一下，验证通过，才能使用这个缓存。  
2、到期  
max-age=  
s-maxage=：只有在代理服务器端才会生效，s-maxage优先级比max-age高  
max-stale=：发起请求的浏览器方，max-age过期了，max-stale时间未到，还是会获取过期的缓存  
3、重新验证  
must-revalidate  
proxy-revalidate  
4、其他  
（1）no-store：本地，代理服务器都不能进行缓存，每次都要重新去服务器请求。  
（2）no-transform：不允许对资源进行压缩、转换  
五、打包完的js，添加hash值，避免服务端内容改变，浏览器max-age时间未到，还是从本地读取缓存。

##### 03-05 验证缓存Last-Modified和Etag的使用 #####

一、Last-Modified  
1、上次修改时间，配合If-Modified-Since或者If-Unmodified-Since使用。  
2、对比上次修改时间以验证资源是否需要更新。  
二、Etag  
1、数据签名  
2、最常见的：对资源进行hash计算  
3、对比资源的签名判断是否使用缓存

const etag = request.headers[('if-none-match'];
    if (etag === '777') {
    	response.writeHead(304, {
    		'Content-Type': 'text/javascript',
    		'Cache-Control': 'max-age=200000, no-cache',
    		'Last-Modified': '123',
    		'Etag': '777'
    	})
    	response.writeHead()
    } else {
    	response.writeHead(200, {
    		'Content-Type': 'text/javascript',
    		'Cache-Control': 'max-age=200000, no-cache',
    		'Last-Modified': '123',
    		'Etag': '777'
    	})
    	response.end('console.log('scripte loaded twice')')
    }

##### 03-06 cookie和session #####

一、cookie  
1、通过set-cookie设置  
2、下次请求会自动带上  
3、键值对，可以设置很多个  
二、cookie属性  
1、max-age和expires设置过期时间  
2、sesure只在Https的时候发送  
3、HttpOnly无法通过document.cookie访问  
四、cookie如果没有设置过期时间，浏览器关闭，就过期了  
五、

const host = request.headers.host;
    if (host='test.com') {
    	response.writeHead(200, {
    	    'Set-Cookie': ['id=123;max-age=100', 'abc=456;HttpOnly','a=111;domain=test.com']
    	  });
    }

六、chrome工具，hostAdmin，可以改host，域名映射。  
七、同一个主域名下，二级域名可以共享cookie  
八、常用：使用cookie来保存session  
九、只要是能定位到这个用户，就是一种session的实现方案

##### 03-07 http长连接 #####

一、长连接，可以设置timeout  
二、Connection:Keep-Alive  
三、chrome里有6个并发链接  
四、图片

'Content-Type': 'imag/jpg'

##### 03-08 数据协商 #####

一、Accept  
Accept、Accept-Encoding、Accept-Language、  
User-Agent：浏览器相关信息  
二、Content  
Content-Type：数据格式，客户端、服务端协商数据格式  
Content-Encoding：gzip、deflate、br  
Content-Language  
三、X-Content-Type-Options  
响应首部相当于一个提示标志，被服务器用来提示客户端一定要遵循在 Content-Type 首部中对 MIME 类型 的设定，而不能对其进行修改。  
四、gzip之后，传输的大小会改变，body大小没有变化。  
五、utf-8是按字符串的方式读取  
1、console的network的preserve log，前面打钩，可以看到前一个页面的log信息

##### 03-09 redirect #####

一、301：永久定向  
1、刷新后network中显示的是，from disk cache，除非主动清空浏览器，不然的话浏览器会自动重定向，服务器端把301改成200了，浏览器页面也还是会自动重定向。  
2、慎用301重定向，重定向之后就不受服务器控制了。

##### 03-10 csp #####

一、Content-Security-Policy  
1、限制资源获取。  
2、报告资源获取越权。  
二、限制方式  
default-src限制全局。  
三、资源类型  
connect-src、manifest-src、img-src、font-src/media-src、frame-src、style-src、script-src…  
四、  
1、后台

'Content-Security-Policy': 'defalut-src http: https:', // 只能用外链(js、img等)，不能用内联(js、img等)
    
    'Content-Security-Policy': 'script-src http: https:', // 只能用外链js，不能使用内联js
    
    'Content-Security-Policy': 'defalut-src \'self\'', // 只能用本域的(js)
    'Content-Security-Policy': 'defalut-src \'self\' http://cdn/css.bootcss.com/', // 只能用本域的, http://cdn/css.bootcss.com的链接
    
    'Content-Security-Policy': 'defalut-src \'self\'; form-action \'self\'', // 限制form的action跳转范围
    
    'Content-Security-Policy': 'defalut-src \'self\'; form-action \'self\'; report uri /report', // 如果出现了不希望的情况，可以主动向服务器发起请求进行汇报。只要涉及到限制的情况，就会发送一个report请求
    
    'Content-Security-Policy-Report-Only': 'defalut-src \'self\'; form-action \'self\'; report uri /report', // 遇到不允许加载的情况，也还是会加载，但是会汇报

2、后台headers不设置Content-Security-Policy，也可以在html中设置。  
但是推荐在后台headers写。

### 第04章 Ningx代理以及面向未来的http ###

##### 04-01 nginx安装和基础代理配置 #####

一、nginx是纯粹的http实现的工具，负载均衡、反向代理web 服务器。  
二、可以提供loadbalence, cache等功能，可以通过lua等语言扩展功能  
nginx配置都会装在：/usr/local/etc/nginx  
三、安装  
1、windows平台  
nginx官网下载完成后  
（1）cd d: nginx-1.13.11/  
（2）./nginx.exe  
（3）打开localhost，welcome to nginx，就是启动成功了  
2、mac  
（1）brew search nginx：查询有咩有nginx  
（2）brew update  
（3）brew install nginx：开始安装nginx  
（4）nginx 或者 brew services start nginx ：启动nginx，浏览器打开locaohost:8080，能看到welcome to nginx  
①配置文件在/usr/local/etc/nginx/nginx.conf中，nginx.conf中的 include servers/\*可以导入自己的配置  
②  
（5）其他  
①nginx -s stop：停止  
②nginx -s reload ：重启  
四、brew update长时间无响应  
1、解决  
替换成中科大提供的更新源

cd "$(brew-repo)"
    git remote set-url origin https://mirrors.ustc.edu.cn/brew.git

cd "$(brew-repo)/Library/Taps/homebrew/homebrew-core"
    git remote set-url origin https://mirrors.ustc.edu.cn/homebrew-core.git

2、原因：资源访问太慢，替换一下镜像就行。  
3、结果：结果还是很慢（最后能更新成功）？网上只找到替换更新源的方法。

##### 04-02 nginx代理配置和代理缓存的用处 #####

一、node中server.js

'Cache-Control': 's-maxage=200',
    'Vary': 'X-Test-Cache' // Vary里的headers值一样才进行缓存

html中  
`headers: X-Test-Cache`  
验证url、头信息一样才能进行缓存，  
适用场景：使用了服务器缓存，不同userAgent返回不同的数据

##### 04-04 使用nginx部署http服务 #####

一、terminal  
openssl req -x509 -newkey rsa:2048 -nodes -sha256 keyout localhost-privkey.pen -out localhost-cert.pem  
二、nginx的nginx.conf，使nginx支持https

ssl on
    ssl_certificate_key certs/localhost-pervkey.pem
    ssl_certificate certs/localhost-cert.pem

三、访问http直接跳转到https

server {
    	listen 80 default_server;
    	listen [i:]:80 default_server;
    	server_name test.com;
    	return 302 https://$server_name$request_uri;
    }

##### 04-05 http2的优势和nginx配置http2的简单使用 #####

一、http2优势  
1、信道复用  
2、分帧传输  
3、server push  
二、  
`'link':'</test.jpg>; as=image; rel=preload'` 服务端主动向客户端发送信息  
三、https的基础上才能开启http2  
四、  
http2，nginx中开启http2

listen 443 http2
    server_name test.com
    http2_push_preload on

五、测试http2性能的网站：[http2.akamai.com/demo/http2-lab.html][http2.akamai.com_demo_http2-lab.html]

### 第05章 课程总结 ###

##### 05-01 课程总结 #####

一、浏览器输入url后http请求返回的完整过程  
1、redirect  
2、app cache  
3、dns解析  
4、创建tcp连接  
5、request发送请求  
6、response请求响应  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ_size_16_color_FFFFFF_t_70 3]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ_size_16_color_FFFFFF_t_70]: /images/20211115/5503a7447dbd43a196b7976bbdf38efc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ_size_16_color_FFFFFF_t_70 1]: /images/20211115/e1c0ebb2087a47d0b82b390f48138e73.png
[http_user_pass_host.com_80_path_query_string_hash]: http://user:pass@host.com:80/path?query=string#hash
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ_size_16_color_FFFFFF_t_70 2]: /images/20211115/05b7ea259a924eb2a87d7d5c97a458b2.png
[baidu.com]: http://baidu.com
[www.baidu.com]: http://www.baidu.com
[http2.akamai.com_demo_http2-lab.html]: http://http2.akamai.com/demo/http2-lab.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ_size_16_color_FFFFFF_t_70 3]: /images/20211115/4bd079c8a0524225a70327f1d09b7629.png