web前端—面试1-CSDN博客

HTML语义化

HTML语义化
- 含义：用正确的标签去做正确的事，也是将HTML的内容结构化
- 优点：
  - 便于对浏览器和搜索引擎解析
  - 便于网站的维护和对源代码的理解
- <meta>添加源数据：有4个特有属性：charset http-equive content name
- meta标签的定义：The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable来自官方的定义
- meta标签的用处：Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata. The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services
- meta标签整体就包含两部分：name 和 http-equive
  - 常见的name属性参数
    - 移动端窗口适配问题：<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no ">
    - keyword，用于告诉搜索引擎，该网页的关键字: <meta name="keywords" content="关键字内容">
    - description，网页的描述：<meta name="description" content="这是我的掘金文章">
    - 其他的一些属性用到直接查资料就可以了
  - 常见的http-equiv属性参数：http-equiv相当于http的作用
    - Conten-Type: <meta http-equiv="Content-Type" content="charset=utf-8">，但是我们更推荐使用HTML5的写法：<meta charset="UTF-8">
    - X-UA-Compatible(浏览器采取何种版本渲染当前页面)：<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> 这里的chrome=1不是说IE的技术增强了可以模拟Chrome浏览器，而是与谷歌开发的Google Chrome Frame(谷歌内嵌浏览器框架GCF)有关。这个插件可以让用户的IE浏览器外观不变，但用户在浏览网页时实际上使用的是Chrome的内核，并且支持Windows XP及以上系统的IE6/7/8。但前提是浏览器需要GCF，访问网址的时候用：gcf:http://www.example.com这种方式实现网页的访问
    - 其他的一些标签使用的时候查文档就可了，我们不可能记住所有的标签属性的!
HTML5新标签
- HTML5的设计目的：为了在移动设备上支持多媒体，目前大部分浏览器已经具备了HTML5的部分新特性
- header：定义了文档的头部区域
- footer:定义section或document的页脚
- article：定义页面独立的内容区域
- aside：定义页面的侧边栏内容
- command：定义命令按钮，比如单选按钮、复选框或按钮
- details:用于描述文档或文档某个部分的细节
- summary:标签包含 details 元素的标题
- dialog: 定义对话框，比如提示框
- mark: 定义带有记号的文本
- nav: 定义导航链接的部分
- progress：定义任何类型的任务的进度
- section：定义文档中的节（section、区段）。
- time: 定义时间和日期
- 将HTML5的元素定义为块级元素，这是为了让不认识HTML5的浏览器认识

header, section, footer, aside, nav, main, article, figure {
    display: block; 
}
复制代码

优雅降级和渐进增强
- 优雅降级：一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack使其可以在低版本浏览器上正常浏览。
- 渐进增强：一开始先针对低版本的浏览器构建界面，然后在逐渐升级针对高版本的浏览器进行效果、交互、追加功能达到根号的体验效果
背景颜色的渐变属性：
- 线性渐变：向下/向右/向左/向上/对角线 linear-gradient(to left/90deg, red, blue, green)
- 径向渐变：有它们的中心定义 radial-gradient(circle/ellipse, red, blue, green)
解决IE浏览器不支持HTML5最好的办法就是下面的这种方式
注意这是一段注释，因为IE9以下的浏览器是不兼容HTML5的为了解决这个问题，这是我们需要引入HTML5shiv.js这个脚本。但是在Chrome下是兼容HTML5的，再加载一个js文件是没有必要的，因此下面的写法是能让IE9-的浏览器加载这段代码，支持HTML5的浏览器不需要加载这段代码。这段代码是写在head标签中的

<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
复制代码

常见浏览器的内核
- Chrome：Blink
- FireFox: Gecko
- safari: Weblit
- IE: Trident，IE最新的浏览器内核采用的是：ChroniumBlink和Trident两个内核,目前还没发布
- Opera: Blink
- 国内一些浏览器使用较多的是webkit

cookie session sessionStorage localStorag它们之间的区别

cookies
- 服务器保存在浏览器上的一小段文本信息，浏览器每次向服务器发出请求就会赋上这段文本
- 每个cookie的大小一般是不会超过4KB，一般单个域名下设置的cookie最好不要超过20个，因为超过限制后，有可能就会被忽略
- cookie包含以下几方面的信息
  - cookie的名字
  - cookie的值
  - cookie的过期时间(expires)，如果我们不设置默认是浏览器窗口关闭的时候过期
  - 所属域名（默认是当前的域名）
  - 生效的路径，默认是当前的路径
- 两个网址只要域名相同，端口相同就可以共享cookie，注意这里是不要求协议相同的，也就是说http://example.com 和https://example.com是可以贡献cookie
session
- 存储于服务器端的数据
sessionStorage
- 生命周期存在于标签页或窗口，用于本地存储一个会话（session）中的数据，这些数据会随着窗口或者标签页的关闭而被清空
localStorage
- 生命周期是永久的，除非用户主动清除浏览器上存储的 localStorage信息，否则它将会永久存在
- Storage.length返回保存的数据项个数
- Storage.setItem('key','value')方法用于存入数据。它接受两个参数，第一个是键名，第二个是保存的数据。如果键名已经存在，该方法会更新已有的键值。该方法没有返回值。注意点：这两个参数都是字符串如果不是字符串会转化为字符串在存入浏览器
- Storage.getItem()方法用于读取数据。它只有一个参数，就是键名。如果键名不存在，该方法返回null
- Storage.removeItem()方法用于清除某个键名对应的键值。它接受键名作为参数，如果键名不存在，该方法不会做任何事情。
- Storage.clear()方法用于清除所有保存的数据。该方法的返回值是undefined
- Storage.key()接受一个整数作为参数（从零开始），返回该位置对应的键值
- Storage存储的数据发生变化的时候，会触发storage事件，我们可以指定这是事件指定的监听函数window.addEventListener('storage', onStorageChange);
cookie webStorage它们之间的区别：
- 共同点：
  - 都是保存在浏览器端，且是同源的！
- 不同点：
  - cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递；cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。
  - 而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
  - 数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
  - 作用域不同，sessionStorage不能在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。WebStorage的api接口使用更方便。

css常用的单位

px:像素单位,计算机屏幕上一个点为1px
%: 百分比的形式
rem:相对单位。相对于根元素 html 的 font-size，假如 html为font-size:12px，那么，在其当中的 div 设置为 font-size: 2rem，就是当中的 div 为 24px。
em:相对单位。相对于父元素计算，假如某个 p元素为font-size:12px，在它内部有个span标签，设置 font-size: 2em，那么，这时候的 span 字体大小为：12 * 2 = 24px
rpx: 微信小程序相对单位。1rpx = 屏幕宽度 / 750 px。在 750px 的设计稿上，1rpx = 1px

CSS基本知识

权重问题：!important -> 行内样式 -> #id -> .class -> 元素和伪元素 -> * -> 继承 -> 默认
CSS3的新特性：
- animate
- transition
- translate
- gradient渐变属性：background:linear-gradient(red,green);
- resize:表示界面是否应该有用户去调整大小

什么是BFC

定义：Block Formatting Content “块级格式化上下文”，它是页面的一块渲染区域，有一套渲染规则决定了子元素如何布局，以及和其他元素之间的关系
BFC的触发条件：dispaly:inline-block; position:absolute/fixed;

js原型和原型链

面试题：面试题
实现原理图

作用域和闭包

ES5中只有函数作用域和全局作用域，在ES6中新增加了块级作用域
ES5模拟实现模块化，核心思想是使用立即执行的函数。
new关键字的实现原理
- 创建一个空对象，作为将要返回的对象实例
- 把这个空对象的原型，指向构造函数的prototype属性
- 将这个空对象赋值给函数内部的this关键字
- 开始执行构造函数内部的代码
闭包做的作用：
- 实现公有变量----->累加器
- 实现对象的封装----->封装私有变量
- 模块发开发----->防止污染全局变量
js代码执行的三部曲：语法分析预编译解释执行
函数声明---->整体提升，变量----->声明提升，但是它们只能解决最基本的问题。重点还是函数的预编译环节
函数预编译的步骤：
- 创建AO或Go对象
- 找形参和变量声明，将形参和变量声明赋值为AO对象的属性
- 函数形参和实参相统一
- 在函数体里找函数声明，赋值给AO对象的属性

浅拷贝和深拷贝

只有数组和对象是需要深拷贝的，其余的数据类型浅拷贝完全可以实现，包括函数。

数组的去重

利用数组的的indexOf()方法实现去重
利用对象键值对的关系实现去重
利用ES6的Set数据结构和数组的扩展操作符实现

//set配合数组的扩展操作符的实现方式
let arr = [1,2,3,4,1,2,3,2,3,4,2,7,6,57,'hello','hello',0,0,0,0];
let set = new Set(arr);
console.log([...set]);
复制代码

模块化和组件化

CommonJs：它是有node发扬光大，js也是正式进入模块的开发思想中
ES6中提出模块化
- 在ES6之前最主要的模块加载方法就是：commonJS和AMD，commonJS使用与服务器，AMD使用与浏览器，ES6实现的模块方案，完全可以替换commonJS和AMD，实现浏览器服务端通用的模块解决方案。
- ES6的模块设计思想是尽量的静态化，在编译的时候就能确定各个模块的依赖关系以及输入和输出的变量，而commonJS和AMD则是在运行的时候确定这些
- import具有提升的效果，它会默认提升到文件的最顶端
- export default用来指定模块的默认输出，一个模块只能有一个默认输出，所以import后面才是可以不加{}，的
- 跨模块常量，可以被多个文件引用对应的值，export const A = 1;//一般我们使用大写表示
- import是静态的加载，因此无法实现Node.js的require方法，因为require是在运行是加载
- ES6模块和commonJS模块的差异：
  - commonJS模块输出的是一个值的拷贝，而ES模块是值的引用，也就是说在commonJS中一但输出一个值，模块内部的数据的变化就不会影响这个值

//require到底加载那个path，在编译的时候是无法知道的，只有在运行的时候才能知道加载的是那一个path，因此这给import造成了一定的障碍
//为了解决这个问题最新的提案是引入import()函数，完成动态加载
const path = './' + fileName;
const myMoudle = require(path);
复制代码

前端工程化:工程化是一种思想而不是某种技术,通俗一点就是：前端工程化就是用做工程的思维看待和开发自己的项目
前端工程化中具体的包含了前端模块化和前端组件化
模块化的特点：
- 避免变量污染和变量名冲突，因为每一个模块相当于就是一个立即执行的函数
- 更好的分离，按需加载
- 提高代码的复用率
- 提高代码的维护性
- 依赖关系的管理

异步加载js脚本

默认情况下浏览器是同步加载js脚本的，但是这样做最大的缺点就是如果某一个脚本长时间不能加载完，就会出现浏览器卡死的现象，这是非常不好的体验效果，因此为了解决这个问题我们引入了异步加载的方式，async和defer,渲染引擎遇到就会直接跳过，直接执行后面的代码
async:一但下载完，渲染引擎就会停止，执行这个脚本，然后再开始渲染
defer:要等到整个页面在内存中渲染结束（DOM结构渲染完成，以及其他脚本执行完成）才会执行
而window.onload是在文档加载完成后立即触发，执行对应的函数。注意点：window.onload不能同时追加多个函数，一个script中只能有一个，如果出现多个后面的会覆盖前面的

面向对象和面向过程

防抖和节流

任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行
参考资料
节流：指定的时间间隔内只会执行一次，和防抖还是有一定区别的
重绘和回流：
- 当元素样式的改变不影响布局时，浏览器将使用重绘对元素进行更新，此时由于只需要 UI 层面的重新像素绘制，因此损耗较少。
- 回流是指会影响布局的情况，对DOM的开销是比较大的，回流一定会引起重绘的，但是重绘不一定会引起回流
- 注意点:为了避免大量的回流，因此我们引入了防抖函数和节流函数尽可能的去避免回流带来的开销

浏览器解析url的具体过程

DNS域名解析过程:DNS就是指域名系统，就是将我们输入的网址解析为网址对应的IP地址
- 用户在浏览器地址栏输入如：www.example.com的时候
- 浏览器根据地址在自身的缓存中查找DNS的解析记录，如果存在则直接返回IP地址，如果不存在则查找操作系统的host文件中是否有该域名的解析记录，如果有则直接返回
- 如果在浏览器自身的缓存中或操作系统额host文件中没有找到对应的IP地址，或者IP已过期，则向域名服务器发起请求解析这个域名
- 先向本地域名服务器发起请求，如果解析不了，则再向根域名服务器发起解析请求
- 根域名服务器向本地服务器返回一个顶级域名服务器的地址
- 本地服务器再向顶级域名服务器发起请求
- 顶级域名服务器接受到请求后，查找并返回域名对应的域名服务器的地址（这个域名服务器就是网站注册的域名服务器）
- 域名服务器会查找域名和IP地址对应的地址映射表，返回一个目标IP地址和一个TTL（time To Live）值
- 本地服务器接受到IP地址和TTL值，进行缓存，缓存的时间有TTL控制
- 本地域名服务器将解析的结果返回给用户，用户根据TTL值缓存在本地服务器中，此时域名解析过程结束
- 注意点：TTL是IP协议包中的一个值，它告诉网络数据包在网络中的时间是否太长而被丢弃。目的还是为了加快域名的解析。
TCP的三次握手：
- 什么是TCP：TCP是一种面向连接的、可靠的、基于字节流的传输层通信协议。每一条TCP连接都有两个端点，我们把这种端点叫做套接字（socket），它的定义为：端口号拼接到IP地址后面形成套接字，例如L我们的IP地址为：192.168.1.1，端口号为：80，那我们得到的套接字为：192.168.1.1:80
- TCP报文首部
  - 源端口和目的端口，各占2个字节，分别写入源端口和目的端口
  - 序号，占4个字节，TCP连接中传送的字节流中的每个字节都按顺序编号。例如，一段报文的序号字段值是 301，而携带的数据共有100字段，显然下一个报文段（如果还有的话）的数据序号应该从401开始
  - 确认号，占4个字节，用于对对方发来的TCP报文段的响应，其值为收到的TCP报文段的序号值加1。例如：B收到A发送过来的报文，其序列号字段为501，而数据长度是200字节，这表明B 正确的接收到了A发送的到700位置的数据，因此B期望收到A的下一个数据序号是701，于是B 在发送给A的确认报文中把确认号值为701
  - 4位头部长度：标志该TCP头部具有多长，单位为字节(4字节)
  - 6位保留：表示保留今后使用
  - 6个标志位：
    - 紧急URG：当URG = 1时，表明紧急指针字段有效。告诉系统此报文段中有紧急数据
    - 确认ACK：仅当ACK=1时，确认号字段才有效。TCP规定，在连接建立后所有报文的传输都必须把ACK置1；
    - 推送PSH：推送PSH，当两个应用进程进行交互式通信时，有时在一端的应用进程希望在键入一个命令后立即就能收到对方的响应，这时候就将PSH=1；
    - 复位RST: 当RST=1，表明TCP连接中出现严重差错，必须释放连接，然后再重新建立连接
    - 同步SYN:在连接建立时用来同步序号。当SYN=1，ACK=0，表明是连接请求报文，若同意连接，则响应报文中应该使SYN=1，ACK=1；
    - 终止FIN:表示通知对方要关闭连接(携带FIN标志的TCP报文段为结束报文段)
  - 窗口：占2个字节，指通知接收方，发送此报文你需要多大的空间来接受
  - 校验和：占2个字节，校验首部和数据这两部分
  - 紧急指针：占2字节，指出本报文中紧急数据的字节数
  - 选项信息：长度可变，定义一些其他的可选的参数
- 三次握手：
  - 第一次握手：起初客户端和服务端都是处于close关闭转态，client将标志位SYN（报文首部同步位）置为1，随机产生一个seq（初始序列号）=x,并将该数据包发送给server,client进入SYN-SENT（同步已发送）状态，等待server的确认
  - 第二次握手：server收到请求报文后，有SYN=1得知，client建立了连接，server将SYN和ACK都置为1，ack = x + 1,随机产生一个值seq = y,并将该数据包发送给client确认连接请求，server进入SYN—RCVD转态，此时操作系统为该TCP连接分配TCP缓存和变量
  - 第三次握手：client收到确认信息后，检查seq是否为x+1,ACK是否为1，如果正确则将标志位ACK置为1，ack =y+1;并且此时操作系统为该TCP连接分配TCP缓存和变量，并将该数据包发送给 Server，Server 检查 ack 是否为 y + 1，ACK 是否为 1，如果正确则连接建立成功，Client 和 Server 进入 established 状态，完成三次握手，随后 Client 和 Server 就可以开始传输数据。

TCP连接的释放（四次挥手）
- 第一次挥手：客户端发出连接释放报文，并且停止发送数据，释放数据报文首部，FIN=1，其序列号为：seq=u，此时的客户端进入FIN-WAit-1状态
- 第二次挥手：服务器收到连接释放报文后，发送确认报文ACK=1，ack= u+1，并且带上自己的序列号，此时服务端进入关闭等待状态CLOSED-WAIT，此时服务端通知高层应用进程，此时客户端到服务端的连接就释放了，这是出于半关闭状态，即客户端已经没有数据要发送了，但是服务端还是可以向服务客服端端发送数据的这个事件还要持续一段时间就是我们的CLOSE-WAiT
- 第三次挥手：服务端将最后的数据发送完毕后，向客户端发送链接释放报文，FIN=1，ack=u + 1,由于在半关闭状态，服务器很可能有发送了一些数据，等数据发送完毕之后，服务器进入最后确认转态，等待客户端的确认，
- 第四次挥手：客户端收到服务器的释放报文后必须向服务器发出ACK=1，ack = w + 1,自己的序列号是seq= w+ 1,此时的客户端进入了事件等待转态，注意:此时的TCP连接还是没有断开，必须经过2 * MSL(最长报文段寿命)后断开连接，此时客户端才进入CLOSED状态
- 服务端收到客户端发的确认信息后立即进入CLOSED状态，可以看到服务端结束TCP的时间要比客服端早
- 为什么客户端最后还要等待2MSL？
  - 保证客户端发送的最后一个ACK报文能够到达服务器，因为这个ACK报文可能丢失
  - 站在服务器的角度看来，我已经发送了FIN+ACK报文请求断开了，客户端还没有给我回应，应该是我发送的请求断开报文它没有收到，于是服务器又会重新发送一次

ES6

let const var它们之间的区别
变量的解构赋值
字符串的扩展
数值的扩展
函数的扩展
数组的扩展
对象的扩展
Symbol
Set和Map数据结构
Promise
async和await
Class的继承
Module的语法和Module的加载实现
编程风格

Vue

MVVM
vue的声明周期
- 声明周期参考案例
- diff算法
双向数据绑定
virtual DOM
template编译
nextTick
父子组件的通信
兄弟组件之间的通信
keep-alive:keep-alive是vue内置的一个组件，可以在切换组件的时候将状态保存在内存中，避免重新渲染DOM，它是一个抽象组件，自身是不会渲染成DOM
vue-router
VueX
vue中的跨域解决：使用代理的方式在config/index.js中配置

proxyTable: { 
  '/api': {  //使用"/api"来代替"http://f.apiplus.c" 
    target: 'http://f.apiplus.cn', //源地址 
    changeOrigin: true, //改变源，允许跨域 
    pathRewrite: { 
      '^/api': '' //路径重写，可以理解成 用/api代替target的地址
      } 
  } 
}
复制代码

浏览器相关的知识

####网络协议

网络的分层
- OSI的七层：物理层、数据链路层、网络层、传输层、会话层、表示层、应用层
- TCP/Ip的四层协议（通常我们都是按照五层划分的）：物理层、数据链路层、网络层、传输层、应用层
HTTP和HTTPS
- HTTP传输的数据都是未加密的，也就是明文传输，传入隐私信息是非常不安全的
- HTTPS：是以安全为目标的传输通道。是在HTTP下加入SSL层实现的，SSL：指安全套阶层，是为网络通信传输安全和数据安全传输的一种安全协议
HTTP状态码
- 100开头的：指示信息，表示信息已接收
- 200开头的：请求成功
- 300开头的：请求重定向
- 400开头的：请求错误
- 500开头的：服务器错
常见的HTTP请求字段
- referrer:用于指定该请求是从哪个页面跳转来的，常被用于分析用户来源，
- referrer-policy取值为：no-referrer-when-downgrade表示当发生降级（比如从 https:// 跳转到 http:// ）时，不传递 Referrer 报头。但是反过来的话不受影响。通常也会当作浏览器的默认安全策略。
- HTTP具体的一些参考
- content-Encoding: Gzip表示服务器使用了Gzip的压缩方式，目的也是为了优化性能

性能优化

网络方面：减少http请求（合并js文件、合并css文件、css sprite、使用base64表示简单的图片）
减少资源的体积：gzip压缩（主要是针对HTML的）js混淆（主要是删除代码中的空格）、丑化（将js中的变量名用简单的变量名代替）、css压缩、图片压缩
缓存：DNS缓存、CDN部署与缓存、http缓存
移动端的情况下的优化：首屏优化，保证屏幕加载大小小于14kb、使用长cache减少重定向、不要滥用web字体，开启GUI渲染加速
渲染和DOM方面：优化网页渲染css文件放在头部，js文件放在尾部或者使用异步，避免直接在document上频繁的操作DOM
数据方面：
- 图片加载处理：图片预加载和图片懒加载，首屏进度条的提示
- 异步请求的优化：使用正常的json数据格式进行交互、部分常用数据的缓存、数据埋点和统计、合理的使用webworker给js创建多线程环境

基础算法

视口适配问题

跨域问题

同源政策
- 目的：保证用户的信息安全和防止恶意的网站窃取信息
- 同源政策的限制：
  - 无法获取非同源下的cookie localStorage IndexedDB
  - 无法接触非同源网页的DOM
  - 无法向非同源网页发送ajax请求，注意是可以发送的但是会被浏览器拒绝
跨域的几种解决方式
- jsonp
  - 原理：网页通过添加一个script标签，向服务器请求json数据，这种方法不受同源政策的限制，服务器接受到请求后，将数据放在一个指定的回调函数中传回客服端，核心就是客户端传递一个callback函数给服务器
- 动态script脚本的方式
  - 原理：动态脚本的方式和jsonp的方式有点像，只不过这个script标签是我们自己写的
- 基于jquery的跨域：jquery已经帮我们把跨域封装到了ajax方法上面，我们可以直接方便的使用，我们只需将ajax传入的对象中设置datatype:'jsonp',然后为jsonpCallback:指定一个函数
- 基于iframe的跨子域实现原理：主要是通过document.domain实现的，两个页面都通过强制的设置document.domain为基础主域
- window.name + iframe实现跨域
- WebSocket:WebSocket是一种全双工通信协议，同时也允许跨域通信，通过ws://(非加密)或者wss://(加密)作为协议前缀，该协议不实行同源政策，只要服务器支持就可以实现跨域资源请求，里面有一个非常重要的字段origin：表示请求源发自那个域名
- CORS（跨域资源分享）：是W3C的标准，属于跨域ajax请求的根本解决方式，相比json只能发个get请求，CORS允许任何类型的请求，浏览器默认是实现了CORS,只要我们确保服务器端是实现了CROS的接口即可
  - 解决的问题：它允许浏览器向跨域的服务器发出XMLHttpRequest请求，从而克服了ajax只能同源请求的限制
  - 实现CORS的关键在服务器实现CROS的接口，就可以实现通信，客服端浏览器会默认加进去的不需要我们处理
  - CORS请求分为两类：简单请求和非简单请求
  - 只要同时满足下面两个条件就属于简单请求
    - 请求条件是GET POST HEAD
    - http的信息头不超过规定的几种，具体查文档实现
- Node.js中间件代理跨域：node + express + http-proxy-middleware