前端需要掌握的网络原理

同源：

浏览器有一个概念——同源策略(Same-Origin Policy)。

所谓同源是指，域名，协议，端口相同。

1.Cookie、LocalStorage 和 IndexDB 无法读取
2.DOM 和 Js对象无法获得
3.AJAX 请求不能发送

跨域

JS跨域请求就是突破同源的方法
1.CORS方案
需要服务器支持，浏览器默认都支持该功能。

CORS通信与同源的AJAX通信代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。

2.jsonp跨域
通过动态创建script，再请求一个带参网址实现跨域通信，只能实现get请求。

3.document.domain+ iframe跨域
此方案仅限主域相同，子域不同的跨域应用场景。

实现原理：两个页面都通过js强制设置document.domain为基础主域，就实现了同域。

4.location.hash + iframe跨域

A域：a.html -> B域：b.html -> A域：c.html，a与b不同域只能通过hash值单向通信，b与c也不同域也只能单向通信，但c与a同域，所以c可通过parent.parent访问a页面所有对象。

5.window.name + iframe跨域

window.name属性的独特之处：name值在不同的页面（甚至不同域名）加载后依旧存在，并且可以支持非常长的 name 值（2MB）。

6.postMessage跨域
postMessage是HTML5 XMLHttpRequest Level 2中的API，且是为数不多可以跨域操作的window属性之一，它可用于解决以下方面的问题：
a.） 页面和其打开的新窗口的数据传递
b.） 多窗口之间消息传递
c.） 页面与嵌套的iframe消息传递
d.） 上面三个场景的跨域数据传递

用法：postMessage(data,origin)方法接受两个参数
data： html5规范支持任意基本类型或可复制的对象，但部分浏览器只支持字符串，所以传参时最好用JSON.stringify()序列化。
origin： 协议+主机+端口号，也可以设置为"*"，表示可以传递给任意窗口，如果要指定和当前窗口同源的话设置为"/"。

7. Nodejs中间件代理跨域， nginx代理跨域
9. 同源策略是浏览器的安全策略，不是HTTP协议的一部分。服务器端调用HTTP接口只是使用HTTP协议，不会执行JS脚本，不需要同源策略，也就不存在跨越问题。

简单概念

1.浏览器通过DNS域名解析到服务IP（ping www.baidu.com）

2.客户端(浏览器)通过TCP协议建立到服务器的TCP连接 (三次握手)

3.客户端（浏览器）向web服务器端（HTTP服务器）发送HTTP协议包，请求服务器里的资源文档 （telnet 模拟）

4.服务器向客户端发送HTTP协议应答包

5.客户端和服务器断开（四次挥手），客户端开始解释处理HTML。

状态码

常见的http状态码

成功状态码：

200 服务器成功返回内容

301/2 临时/永久重定向

304 资源未被修改过

失败状态码：

404 请求内容不存在

500 服务器暂时不可用

503 服务器内部错误

传输协议：TCP/UDP

TCP必须保持连接是可靠的

UDP可以存在丢包