前端面试之路五(网络HTTP篇)

前端面试常见问题：

http method

• HTTP1.0定义了三种请求方法： GET、POST 和 HEAD

• HTTP1.1新增了五种请求方法：OPTIONS、PUT、PATCH、DELETE、TRACE 、 CONNECT

http status code

2开头 （请求成功）表示成功处理了请求的状态代码。

200   （成功）  服务器已成功处理了请求。 一般，这表示服务器提供了请求的网页。 
201   （已建立）  请求成功而且服务器建立了新的资源。 
202   （已接受）  服务器已接受请求，但还没有处理。 
203   （非受权信息）  服务器已成功处理了请求，但返回的信息可能来自另外一来源。 
204   （无内容）  服务器成功处理了请求，但没有返回任何内容。 
205   （重置内容） 服务器成功处理了请求，但没有返回任何内容。
206   （部份内容）  服务器成功处理了部分 GET 请求。

3开头 （请求被重定向）表示要完成请求，须要进一步操做。 一般，这些状态代码用来重定向。

300   （多种选择）  针对请求，服务器可执行多种操做。 服务器可根据请求者 (user agent) 选择一项操做，或提供操做列表供请求者选择。 
301   （永久移动）  请求的网页已永久移动到新位置。 服务器返回此响应（对 GET 或 HEAD 请求的响应）时，会自动将请求者转到新位置。
302   （临时移动）  服务器目前从不一样位置的网页响应请求，但请求者应继续使用原有位置来进行之后的请求。
303   （查看其余位置） 请求者应当对不一样的位置使用单独的 GET 请求来检索响应时，服务器返回此代码。
304   （未修改） 自从上次请求后，请求的网页未修改过。 服务器返回此响应时，不会返回网页内容。 
305   （使用代理） 请求者只能使用代理访问请求的网页。 若是服务器返回此响应，还表示请求者应使用代理。 
307   （临时重定向）  服务器目前从不一样位置的网页响应请求，但请求者应继续使用原有位置来进行之后的请求。

4开头 （请求错误）这些状态代码表示请求可能出错，妨碍了服务器的处理。

400   （错误请求） 服务器不理解请求的语法。 
401   （未受权） 请求要求身份验证。 对于须要登陆的网页，服务器可能返回此响应。 
403   （禁止） 服务器拒绝请求。
404   （未找到） 服务器找不到请求的网页。
405   （方法禁用） 禁用请求中指定的方法。 
406   （不接受） 没法使用请求的内容特性响应请求的网页。 
407   （须要代理受权） 此状态代码与 401（未受权）相似，但指定请求者应当受权使用代理。
408   （请求超时）  服务器等候请求时发生超时。 
409   （冲突）  服务器在完成请求时发生冲突。 服务器必须在响应中包含有关冲突的信息。 
410   （已删除）  若是请求的资源已永久删除，服务器就会返回此响应。 
411   （须要有效长度） 服务器不接受不含有效内容长度标头字段的请求。 
412   （未知足前提条件） 服务器未知足请求者在请求中设置的其中一个前提条件。 
413   （请求实体过大） 服务器没法处理请求，由于请求实体过大，超出服务器的处理能力。 
414   （请求的 URI 过长） 请求的 URI（一般为网址）过长，服务器没法处理。 
415   （不支持的媒体类型） 请求的格式不受请求页面的支持。 
416   （请求范围不符合要求） 若是页面没法提供请求的范围，则服务器会返回此状态代码。 
417   （未知足指望值） 服务器未知足"指望"请求标头字段的要求。

5开头（服务器错误）这些状态代码表示服务器在尝试处理请求时发生内部错误。 这些错误多是服务器自己的错误，而不是请求出错。

500   （服务器内部错误）  服务器遇到错误，没法完成请求。 
501   （还没有实施） 服务器不具有完成请求的功能。 例如，服务器没法识别请求方法时可能会返回此代码。 
502   （错误网关） 服务器做为网关或代理，从上游服务器收到无效响应。 
503   （服务不可用） 服务器目前没法使用（因为超载或停机维护）。 一般，这只是暂时状态。 
504   （网关超时）  服务器做为网关或代理，可是没有及时从上游服务器收到请求。 
505   （HTTP 版本不受支持） 服务器不支持请求中所用的 HTTP 协议版本。
复制代码

缓存

• 客户端缓存
• 代理服务器缓存
• 缓存如何验证可用性

cache-control：

• max-age=100 静态资源缓存100s
• public、private 设置只能在客户端缓存，仍是能够经过代理服务器缓存
• must-revalidate 在缓存过时后必须到服务器端验证过才能继续使用缓存
• no-cache、no-store 控制是否使用缓存

缓存验证

• last-modified配合if-modified-since
• etage配合if-none-match

缓存是web开发中对性能提高最大的一面

更有意义的头部

• Content-type、Content-Encoding等用来约束数据类型
• cookie保持会话信息
• CORS实现跨域并保持安全性限制

深刻到TCP：

• 什么是三次握手
• HTTPS连接的建立过程，以及为何HTTPS就是安全的
• 什么是长连接，为何须要长连接
• HTTP2的信道复用为何能提高性能

输入URL后HTTP请求返回的完整过程

• 一、为何一开始须要作redirect：由于浏览器可能记录了这个地址永久跳转成一个新的地址，一开始浏览器须要判断redirect，redirect到什么地址
• 二、看缓存：看请求的资源是否已经缓存
• 三、dns解析
• 四、建立链接
• 五、开始发送数据包

Nginx

• 配置ngnix做为http的代理
• 开启ngnix的缓存功能
• 利用代理缓存提升http性能

HTTP协议基础及发展历史

五层网络模型介绍

• 物理层：主要定义物理设备如何传输数据，硬件设备
• 数据链路层：在通讯的实体间简历数据链路连接
• 网络层：为数据在节点之间传输建立逻辑链路
• 传输层：像用户提供可靠的端到端(End-to-End)服务
  传输层向高层屏蔽了下层数据通讯的细节
• 应用层:为应用软件提供了不少服务
  构建于TCP协议之上
  屏蔽了网络传输相关细节

HTTP协议发展历史

HTTP 0.9

• 一、只有一个命令GET
• 二、没有header等描述数据的信息
• 三、服务器发送完毕，就关闭了TCP链接

HTTP1.0

• 一、增长了不少命令
• 二、增长status code和header
• 三、多字符集支持、多部分发送、权限、缓存等

HTTP1.1

• 一、持久链接(创建TCP消耗)
• 二、pipeline(同一个连接能够发送多个请求，服务端是按照顺序接受，可能须要等待，串行)
• 三、增长host和其余一些命令

HTTP2（还没有普及）

• 一、全部数据以二进制进行传输
• 二、同一个连接里面发送多个请求再也不小按照顺序来(并行)
• 三、头信息压缩以及推送等提升效率的功能

HTTP的三次握手

• 客户端和服务器端进行信息发送，是须要建立一个TCP-connetion
• http是不存在链接这个概念，只有请求和响应，它们都是数据包
• tcp连接能够发送多个http请求

三次握手时序图

URI-URL和URN

Uniform Resource Locator/统一资源定位器

http://user:pass@host.com:80/path?query=string#hash
复制代码

URN:永久统一资源定位符

• 在资源移动以后还能找到
• 目前尚未很是成熟的使用方案

HTTP报文格式

HTTP各类特性总览

CORS跨域请求的限制与解决

请求已经发送，已经获取到了返回数据。不过浏览器在解析返回的时候，发现是不容许的，浏览器拦截了，隐藏了数据。必须服务器容许跨越请求。

• 浏览器容许link、script、img这些在标签上写路径加载的时候，容许跨越，无论服务器是否容许跨域请求。jsnop原理也是如此

• 服务器端能够加： 'Access-Control-Allow-Origin': '*'，表示容许跨域访问。'*'表示容许全部跨域访问，能够设置指定的服务器访问。多域能够动态判断

CORS跨域限制以及预请求验证

不须要预请求的限制： (其他须要预请求验证后才能发送)

• 一、容许method： GET、HEAD、POST
• 二、容许Content-Type： text/plain、 multipart/form-data、 application/x-www-form-urlencoded
• 三、请求头限制：
  • Accept
  • Accept-Language
  • Content-Language
  • Last-Event-ID
  • Content-Type： 只限于三个值
    • application/x-www-form-urlencoded、
    • multipart/form-data、
    • text/plain
• 四、XMLHttpRequestUpload对象军没有注册任何事件监听器
• 五、请求中没有使用ReadableStream

解决方法：

'Access-Control-Allow-Origin': 'http://127.0.0.1:8888',
'Access-Control-Allow-Headers': 'X-Test-Cors',   
'Access-Control-Allow-Methods': 'POST, PUT, DELETE',

'Access-Control-Max-Age': '1000'
//容许以这种方式发送预请求的时间，这段时间内不须要再发送预请求了
复制代码

缓存头Cache-Control的含义和使用

可缓存性

• pulic :http请求通过的任何路径均可以对返回内容的缓存
• private:只有发起请求的浏览器才能够进行缓存
• non-cache:任何节点都不能够进行缓存

到期：

• max-age=<seconds>
• s-maxage=<seconds>            //若是两个都设置，代理服务器会读取这个，专为代理服务器设置
• max-stale=<seconds>           //只有在发起端设置才管用，即使max-age过时，只要在max-stale时间内仍然可使用过时的缓存，服务端返回中设置没有做用

从新验证：

• 一、must-revalidate                   //设置了max-age中若是已通过期了，必须去原服务端从新发送请求，从新获取数据验证是否真的过时
• 二、proxy-revalidate           //缓存服务器中
• 三、no-store                 //永远都要去服务器拿新的
• 四、no-transform         //告诉代理服务器不可改动内容

cache-control 应用

• 一、只是声明性的，并无强制约束力
• 二、chrome 里面的disable cache 必须勾掉
• 三、cache-control 是一种客户端缓存，并且通常缓存时间都比较长，可能会致使服务端静态资源改变而客户端没法更新。解决方案：在静态资源文件后面加上一串哈希码，若是内容没有变，哈希码没变，可使用静态资源缓存；若是文件有边，发的请求就是新的静态资源请求。

'Cache-Control': 'max-age=200,public'
复制代码

缓存验证Last-Modefied 和Etag 的使用

资源验证

last-modified

• 上次修改时间
• 配合If-Modified-Since 或者If-Unmodified-Since 使用

Etag

• 更加严格的验证
• 数据签名(任何的修改，惟一)，最典型的就是哈希计算获得惟一值
• 配合If-Match 或者If-Non-Match
• 对比资源的签名判断是否使用缓存

说明

• 一、304:Not Modified。资源没有修改，能够直接读缓存。会忽略response body里面的内容。
• 二、If-Modified-since和If-None-Match，disable cache 缓存验证头就不发送这两个参数。
• 三、若是设置了no-store会忽略全部跟缓存有关的

const http = require('http')
const fs = require('fs')

http.createServer(function(request, response) {
    console.log('request ', request.url)
    const html = fs.readFileSync('test.html', 'utf8')
    if (request.url === '/') {
        const html = fs.readFileSync('test.html', 'utf8')
        response.writeHead(200, {
            'Content-Type': 'text/html'
        })
        response.end(html)
    }
    if (request.url === '/script.js') {
        const html = fs.readFileSync('test.html', 'utf8')

        const etag = request.headers['if-none-match']
        if (request.getHeader = '777') {
            response.writeHead(304, {
                'Content-Type': 'text/javascript',
                'Cache-Control': 'max-age=2000000,no-cache',
                'Last-Modified': '123',
                'Etag': '777'
            })
            response.end('123')
        } else {
            response.writeHead(200, {
                'Content-Type': 'text/javascript',
                'Cache-Control': 'max-age=2000000,no-cache',
                'Last-Modified': '123',
                'Etag': '777'
            })
            response.end('console.log("script loadded")')
        }
    }
}).listen(8888)

console.log('serve listening on 8888')
复制代码

const http = require('http')
const fs = require('fs')

http.createServer(function(request, response) {
    console.log('request ', request.url)
    const html = fs.readFileSync('test.html', 'utf8')
    response.writeHead(200, {
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Headers': 'X-Test-Cors'
    })
    response.end(html)
}).listen(8887)

console.log('serve listening on 8887')
复制代码

cookie 和 session

cookie

• 经过Set-Cookie 设置，同域请求中
• 下次请求会自动带上
• 键值对，能够设置多个

cookie 属性

• max-age 和 expires 设置过时时间（若是不设置过时时间，关闭浏览器就关闭了）
• secure 只在https 的时候发送
• httpOnly 没法经过document.cookie 访问

'Set-Cookie':['id=12343,max-age=10,name=dafdafda';HttpOnly]
复制代码

不一样域cookie不能获取，同一个主域名的二级域名能够共享cookie，经过domain这种方式。

'Set-Cookie':['id=12343,max-age=10,domain="test.com']
复制代码

HTTP长链接

• 复用TCP/IP 链接
• 三次握手的开销可能不要比长链接消耗的高
• Connection: keep-alive
• chrome 通常六个并发
• HTTP2 信道复用

数据协商

请求

• Accept ：//返回数据类型
• Accept-Encoding ：//主要是如何数据压缩
• Accept-Language ://返回语言
• User-Agent ：//返回pc端仍是移动端

返回

Content-Type：对应Accept
Content-Encoding:对应Accept-Encoding
Content-Language:对应Accept-Language
复制代码

X-Content-Type-Options:nosniff  //不会主动预测返回内容
复制代码

数据压缩

const zlib = require('zlib')
'Content-Encoding':'gzip'
复制代码

Redirect

301 Moved Permanently 被请求的资源已永久移动到新位置，而且未来任何对此资源的引用都应该使用本响应返回的若干个URI之一。若是可能，拥有连接编辑功能的客户端应当自动把请求的地址修改成从服务器反馈回来的地址。除非额外指定，不然这个响应也是可缓存的。 重定向在浏览器缓存中，若是用户不清理缓存，那么服务端无法控制

302 Found
请求的资源如今临时从不一样的URI响应请求。因为这样的重定向是临时的，客户端应当继续向原有地址发送之后的请求。只有在Cache-Control或Expires中进行了指定的状况下，这个响应才是可缓存的。

CSP内容安全策略

CSP定义了Content-Security-PolicyHTTP头来容许你建立一个可信来源的白名单，使得浏览器只执行和渲染来自这些来源的资源，而不是盲目信任服务器提供的全部内容。即便攻击者能够找到漏洞来注入脚本，可是由于来源不包含在白名单里，所以将不会被执行。

做用

• 限制资源获取
• 报告资源获取越权

限制方式

• default-src 限制全局跟连接有关的资源类型
• 制定资源类型

获取指令

• connect-src：限制能经过脚本接口加载的URL
• default-src：为其余取指令提供备用服务fetch directives
• font-src：限制经过@font-face加载的字体源。
• frame-src： 限制经过相似<frame>和<iframe> 标签加载的内嵌内容源。
• img-src: 限制图片和图标源
• manifest-src ： 限制 application manifest 文件源。
• media-src ：限制经过<audio> 或<video> 标签加载的媒体文件源。
• object-src：限制经过 <object>, <embed> ，<applet> 标签加载源。
• script-src：限制javascript 源。
• style-src：限制层叠样式表文件源。

文档指令:管理文档属性或者工做环境应用哪一个策略。

• base-uri : 限制在DOM中使用base标签的URL
• plugin-types: 限制一系列能够经过一些限制类型的资源加载内嵌到DOM的插件。
• sandbox: 容许相似{HTMLElement("iframe")}} sandbox sandbox属性

导航指令: 导航指令管理用户能打开的连接或者表单可提交的连接

• form-action:限制能被用来做为给定上下文的表单提交的 目标 URL （说白了，就是限制 form的action 属性的连接地址）
• frame-ancestors 指定可能嵌入页面的有效父项<frame>, <iframe>, <object>, <embed>, or <applet>
• navigation-to 限制文档能够经过如下任何方式访问URL`` (a, form, window.location, window.open, etc.)

报告指令节:报告指令控制 CSP违规的报告过程

• report-uri 当出现可能违反CSP的操做时，让客户端提交报告。这些违规报告会以JSON文件的格式经过POST请求发送到指定的URI
• report-to Fires a SecurityPolicyViolationEvent

其余指令

• block-all-mixed-content:当使用HTTPS加载页面时组织使用HTTP加载任何资源。

'Content-Security-Policy:'default-src http：https''
//只容许http和https加载
'Content-Security-Policy:'default-src \'selt\'';form-action \'self\' //限制只能从本站外链脚本 复制代码