语言 协议 环境 应用
互联网开发行业越来越成熟，越来越卷，潮水退去，只有那些能力牢固的开发才能在这个行业扎根。前端学习都逃不过这四个层面。万变不离其宗，基础牢固，才能学得轻松。环境的变化是很快的，还是应用也更新很快。
- 语言：2015年发生的稍微大一点变更，其余基本不怎么变动。html、css、js.
- 协议：基本不怎么变更，这是基础。 http2出来多少年了，但是我们一直还在用十几年的http 1.1版本。
- 环境：浏览器，node，桌面端，小程序，app。
- 应用：vue.js、react.js、webpack、rollup、bowserify、vite，第三方库，框架、工程化、构建工具
协议
分层的意义：复杂问题简单化，一层只干一件事，相互独立，只解决自己的问题。
五层网络分层模型：
- 应用层：如何包装我们的信息，解决消息格式问题。（HTTP、FTP、DNS、SMTP、POP3）
- 传输层：如何保证我们的消息可靠传递。（TCP、UDP）
- 网络层：如何在互联网中找到对方（IP协议：IPV4、IPV6、路由器，）
- 数据链路层：在子网络中如何正确找到对象（MAC、交换机）
- 物理层：上面给我的东西如何用电信号、光信号表示？ （光纤、双绞线、同轴电缆、集线器）
URL（Uniform Resource Locator）
例如：http://a.com:80/news/detail?id=1#t1
协议(schema)、域名(domain)、端口(port)、路径(path)、参数（query）、哈希(hash)
- 统一资源定位符（URL）：从网络中那台计算机（domain）中的哪个程序（port）寻找哪个服务（path）,并切注明获取服务的细节(query)，以及要使用什么样的协议通信（schema）.
- 当协议是 http ，端口为 80时候，端口默认省略
- 当 协议是https，端口为444时候，端口可以省略不写
- 协议、域名、路径是必须的，其他根据具体要求填写
HTTP (Hyper Text Transfer Protocol)
-
http使用了一种极简的通信方式：请求-响应，一个请求，必定只能对应一个响应。，有请求才有响应。 造成的问题？ =》请求无状态
image.png 请求行
请求头
请求体
服务器的行为受什么影响？ 主要是响应头中的 content-type。 解析html，下载..
AJAX
浏览器本身就具备网络通信能力，但是在早期，浏览器并没有把这个功能开发给js。最早是微软在IE浏览器中把这一能力向js开放，在js代码可以在代码中实现发送请求，并不会刷新页面。 这项技术在2005年被正式命名为AJAX（Asynchronous Javascript And XML）。AJAX就是指在web应用中异步向服务器发送请求。
它的实现方式有两种：XMLHttpRequset 和 Fetch
Promise请求，我们拿到了 Response Header就意味着我们的 Promise 已经完成，但是响应也是需要时间的，就像我们的请求也是一样需要时间的。所以我们的解析也是一个异步的操作。
const xhr = new XMLHttpRequest()
// 监听请求完成
xhr.addEventListener('load', ()=> {
const resp = JSON.parse(xhr.responseText).data
})
// 上监听传进度
xhr.upload.addEventListener('process', (e)=> {
const precent = Math.floor((e.loaded/e.total) * 100%)
})
// 配置请求
xhr.open('post', url)
const formData = new FormData()
formData.append('avator', file)
// 发送请求
xhr.send(formData)
跨域问题 及 解决方案
- 同源策略是浏览器的一套安全策略，当一个源的文档或者脚本，对另外一个源的资源进行通信的时，同源策略就会对这个通信做出不同程度的限制。
- 简单来说就是：同源策略对同源资源 放行， 对异源资源限制，由此限制造成的开发问题，我们称之为 跨域（异源）问题。
源（origin）= 协议 + 域名 +端口，三者必须一模一样，否则就是不同源，url地址路径之前的部分。 简单来说就是浏览器跨域通信是可以访问到服务器信息的，但是浏览器接收到了信息，如果跨域了，我们JS拿不到服务器返回的信息，浏览器给我们前端JS屏蔽掉了.
跨域可能出现的三个场景：
- 网络通信
a元素的跳转；加载css，js，图片等；AJAX - JS API
window.open、window.parent、iframe.contentWindow - 存储
WebStorage、IndexDB
对于不同的跨域场景，以及每个场景中不同的跨域方式，同源策略都有不同的限制。
解决方案
CORS
cors （Cross-Origin Resource Sharing）是最正统的跨域解决方案，也是浏览器最推荐的解决方案。 这是一套规则，用于帮助浏览器判断是否校验通过。 需要修改服务器配置。
cors的基本理念：
- 只要服务器明确表示允许，则校验通过
- 服务器没有明确表示允许 或者明确表示拒绝，则校验不通过。
cors将请求分为两大类：简单请求、预检请求
简单请求
请求方式
GET、POST、HEAD 之一-
请求头字段满足CORS 安全规范，详见 W3C
浏览器默认的自带的请求头都是安足安全规范的，只要开发者不改动或者新增头部，就不会打破此条
-
请求头中 content-type 必须是以下几种中的之一：
- text/plain
- multipart/form-data
- application/x-www-form-urlencodeed
预检请求
浏览器预先发送一个 options请求
``` 请求
OPTIONS /api/user HTTP/1.1
Host: crossdoamin.com
...
origin: http://my.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: a, b, content-type
``` 响应
HTTP/1.1 200 OK
Date: Tue, 21 Apr 2020 09:03:35 GMT
...
Access-Control-Allow-Origin: http://my.com
Access-Control-Allow--Methods: POST, GET
Access-Control-Allow-Headers: a, b, content-type
Access-Control-Max-Age: 86400 // 这里是预检请求时间，浏览器缓存起来，时间范围之内，不再重新预检
细节1-关于cookie
默认情况下，ajax的跨域请求并不会附带 cookie ,这样一来，某些需要权限的操作就无法进行，不过可以通过简单设置就可以实现附带 cookie
// xhr
const xhr = new XMLHttpRequest()
xhr.withCredentials = true
// fetch api
fetch('www.baidu.com',{
credentials: 'include'
})
这样我们的跨域的ajax请求就是一个附带 cookie 身份凭证 的请求，无论是简单请求还是预检请求，都会在请求头中添加 cookie 字段
而服务器响应时，也需要明确告知浏览器客户端：服务器允许这样的凭据
Access-Control-Allow-Credentials: true 另外特别需要注意的是：对于附带身份凭证的请求，服务器不得设置 Access-Control-Allow-Origin: *
细节2-关于跨域获取响应头
在跨域访问时，js只能拿到一些最基本的响应头，例如：Cache-Control、Content-Language、Content-Type、Expires、Last-modified、Pragma，如果需要访问其他头，则服务器需要设置本响应头。
Access-Control-Expose-Headers 头让服务器允许浏览器访问的头放入白名单中
Access-Control-Expose-Headers: authorization, a, b
JSONP
利用script标签跨域通信不受限制的原理，请求一个js文件，返回一个方法调用callback(我们需要数据)，调用浏览器端的 callback 方式，参数就是我们请求到的数据。
- 只能使用GET请求。如果需要传递参数我们就只能拼接在地址栏后面，所以显而易见的是，jsonp只能使用get请求。
- 容易产生安全隐患
恶意攻击者可能使用 ?callback=恶意函数 的方式实现XSS攻击
function jsonp(url, callback){
new Promise(resolve => {
let callbackName = '__' + Math.random().toString(36).substring(2)
window[callbackName] = function(resp) {
delete window[callbackName]
resolve(resp)
}
const script = document.createElement('script')
script.addEventListener('load', ()=> {
script.remove()
})
script.src = url+`?callback=${callbackName}`
document.appendChild(script)
})
}
json('http://www.baidu.com').then(resp => {
...
})
代理(Proxy)。
原理：跨域是浏览器的一个安全策略，服务器与服务器之间通信没有跨域问题。
使用nginx服务器代理
// 启用一个开发服务器
devServer: {
proxy: {
'/api': {
target: 'http://www.baidu.com'
}
}
}
如何选择
最重要的，是要保持生产环境和开发环境一致
下面是一张决策图
具体的几种场景
