[前端面试]HTTP常问问题
HTTP(HyperText Transfer Protocol)是一种用于在网络上传输超文本的协议。面试中,可能会有以下常见的问题:
- HTTP 的工作原理
- HTTP 的请求方法(GET,POST,PUT,DELETE,HEAD 等)
- HTTP 状态码(200, 404, 500 等)和它们的含义
- HTTP 的报文格式
- 缓存控制(Cache-Control)在 HTTP 中的作用
- 跨域资源共享(CORS)在 HTTP 中的作用
此外,还可能会涉及到 HTTP/2 和 HTTP/3 的区别,以及它们与 HTTP/1.1 的比较。
常见的http状态码有哪一些
HTTP状态码共分为5种类型:
- 1XX(临时响应):服务器收到请求——需要请求者继续执行操作。
- 2XX(成功):成功——操作被成功接收并处理。
- 3XX(重定向):重定向——需要进一步的操作以完成请求
- 4XX(请求错误):客户端错误——请求包含语法错误或无法完成请求
- 5XX(服务器错误):服务器错误——服务器在处理请求的过程中发生了错误
状态码 | 含义 | 详情 |
---|---|---|
100(客户端继续发送请求,这是临时响应) | 服务器返回此代码表示已收到请求的第一部分,请求者应当继续提出请求。 | |
101 | 服务器根据客户端的请求切换协议,主要用于websocket或http2升级 | |
200 | 成功 | |
201 | 已创建 | |
202 | 已接收 | |
203 | 非授权信息 | |
204 | 无内容 | |
205 | 重置内容 | |
206 | 部分内容 | |
300 | 多种选择 | |
301 | 永久移动 | |
302 | 临时移动 | |
303 | 查看其他位置 | |
304 | 未修改 | |
305 | 使用代理 | |
307 | 临时重定向 | |
400 | 错误请求 | |
401 | 未授权 | |
403 | 禁止 | 服务器拒接请求 |
404 | 未找到 | |
405 | 方法禁用 | |
406 | 不接受 | |
407 | 需要代理授权 | |
408 | 请求超时 | |
409 | 冲突 | |
410 | 已删除 | |
500 | 服务器内部错误 | |
501 | 尚未实施 | |
502 | 错误网关 | |
503 | 服务不可用 | |
504 | 网关超时 | |
505 | HTTP版本不受支持 | 服务器不支持请求中所使用的的HTTP协议版本 |
HTTP中Get和Post区别
- GET后退按钮/刷新无害,POST数据会被重新提交(浏览器应该告知用户数据会被重新提交)。
- GET书签可收藏,POST为书签不可收藏。
- GET能被缓存,POST不能缓存 。
- GET编码类型application/x-www-form-url,POST编码类型encodedapplication/x-www-form-urlencoded 或 multipart/form-data。为二进制数据使用多重编码。
- GET历史参数保留在浏览器历史中。POST参数不会保存在浏览器历史中。
- GET对数据长度有限制,当发送数据时,GET 方法向 URL 添加数据;URL 的长度是受限制的(URL 的最大长度是 2048 个字符)。POST无限制。
- GET只允许 ASCII 字符。POST没有限制。也允许二进制数据。
- 与 POST 相比,GET 的安全性较差,因为所发送的数据是 URL 的一部分。在发送密码或其他敏感信息时绝不要使用 GET !POST 比 GET 更安全,因为参数不会被保存在浏览器历史或 web 服务器日志中。
- GET的数据在 URL 中对所有人都是可见的。POST的数据不会显示在 URL 中。
常见的Content-type都有啥
application/x-www-form-urlencoded
请求头中的Content-Type默认值为content-type:application/x-www-form-urlencoded,不指定content-type时,默认使用此格式。此时参数格式如下:
key1=value1&key2=value2
1
这里可以使用qs.js库,qs.parse
方法可以把一段格式化的字符串转换为对象格式,qs.stringify
则和 qs.parse
相反,是把一个参数对象格式化为一个字符串。
字符串转对象格式:
let url = 'http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e';
let data = qs.parse(url.split('?')[1]);
{
a: 1,
b: 2,
c: '',
d: xxx,
e: ''
}
对象转字符串格式:
let params = { c: 'b', a: 'd' };
qs.stringify(params)
// 结果是
'c=b&a=d'
这里通过qs.stringify转化的字符串就可以直接作为参数传给后端了。
multipart/form-data
application/x-www-form-urlencoded是把数据使用url编码后传送给后端,不适合用于传输大型二进制数据或者包含非ASCII字符的数据,multipart/form-data
就诞生了,专门用于有效的传输文件。
multipart/form-data 既可以上传文件,也可以上传键值对,它采用了键值对的方式,所以可以上传多个文件。
使用multipart/form-data时,请求体参数可来自于new FormData()生成的实例,或enctype为multipart/form-data的表单数据。
let data = new FormData()
data.append('file1', file1)
data.append('file2', file2)
this.axios({
url: url,
headers: {'Content-Type': 'multipart/form-data'},
data: data
}).then(()=>{
...
})
content-type:application/json
application/json能够方便传递复杂多层次对象,消息主体是序列化的JSON字符串。
let params = { c: 'b', a: 'd' };
params = JSON.stringify(params)
强缓存与协商缓存
重点:强制缓存返回的报文状态码为 200,协商缓存返回的报文状态码为 304
CORS与跨域
跨域的定义:当协议、子域名、主域名、端口号中任意一个不相同时,都算作不同域,不同域之间相互请求资源,就算作“跨域”。
跨源资源共享 (CORS) Cross- Origin Resource Sharing ,是一种基于 HTTP Header 的机制,该机制通过允许服务器标示除了它自己以外的其它 origin(域,协议和端口),这样浏览器可以访问加载这些资源。
跨源资源共享标准新增了一组 HTTP 首部字段,允许服务器声明哪些源站通过浏览器有权限访问哪些资源。
而且对那些可能对服务器数据产生副作用的 HTTP 请求方法(特别是 GET 以外的 HTTP 请求,或者搭配某些 MIME 类型的 POST 请求),浏览器必须首先使用 OPTIONS 方法发起一个预检请求(preflight request),从而获知服务端是否允许该跨源请求。
只有在服务器确认允许之后,才发起实际的 HTTP 请求。在预检请求的返回中,服务器端也可以通知客户端,是否需要携带身份凭证(包括 Cookies 和 HTTP 认证相关数据)。
常见解决方法:
- 使用 JSONP(JSON with Padding)
- 使用 CORS(Cross-Origin Resource Sharing)
- 使用代理服务器(Nginx反向代理)
- 使用 HTML5 中的 postMessage 方法
- 使用 window.name 属性
- 使用 document.domain 属性来跨子域
怎么理解HTTP是无状态的
HTTP的CSP有了解吗?
HTTP 首部中的 Content-Security-Policy
CSP 本质上就是建立白名单,开发者明确告诉浏览器哪些外部资源可以加载和执行。我们只需要配置规则,如何拦截是由浏览器自己实现的。我们可以通过这种方式来尽量减少 XSS 攻击。
通常有两种方式来开启 CSP
- 一种是设置 HTTP 首部中的
Content-Security-Policy
- 一种是设置 meta 标签的方式
<meta http-equiv="Content-Security-Policy">
这里以设置 HTTP Header 来举例
- 只允许加载本站资源
Content-Security-Policy:default-src 'self'
- 只允许加载 HTTPS 协议图片
Content-Security-Policy: img-src https://*
- 允许加载任何来源框架
Content-Security-Policy: child-src 'none'
设置的属性还有很多,更多设置属性可以查看 MDN 文档。
从输入URL回车后,都发生了什么?
HTTPS原理?
HTTPS(超文本传输安全协议),HTTPS是在HTTP协议的基础上增加了安全的属性,HTTPS通过SSL/TLS(安全套阶层)来加密数据包,SSL再通过数字证书来验证服务器的身份,以此来实现数据在客户端到服务器之间的传输安全。
HTTP2有哪些优化?
http1缺陷
- TCP连接数限制
因为并发的原因一个TCP连接在同一时刻可能发送一个http请求。所以为了更快的响应前端请求,浏览器会建立多个tcp连接,但是第一tcp连接数量是有限制的。现在的浏览器针对同一域名一般最多只能创建6~8个请求;第二创建tcp连接需要三次握手,增加耗时、cpu资源、增加网络拥堵的可能性。所以,缺点明显。
- 线头阻塞 (Head Of Line Blocking) 问题
每个 TCP 连接同时只能处理一个请求 - 响应,浏览器按 FIFO 原则处理请求,如果上一个响应没返回,后续请求 - 响应都会受阻。为了解决此问题,出现了 管线化 - pipelining 技术,但是管线化存在诸多问题,比如第一个响应慢还是会阻塞后续响应、服务器为了按序返回相应需要缓存多个响应占用更多资源、浏览器中途断连重试服务器可能得重新处理多个请求、还有必须客户端 - 代理 - 服务器都支持管线化。
- Header 内容多
每次请求 Header不会变化太多,没有相应的压缩传输优化方案。特别是想cookie这种比较长的字段
HTTP2优化点:
- 二进制分帧
- 多路复用
- 头部压缩
- 服务端推送(server push)
- 流量控制
- 资源优先级和依赖设置
HTTP3了解吗?
HTTP/3 的核心是对用于管理文件传输的底层传输层的彻底改造。
它代表了从 TCP(传输控制协议)到 UDP(用户数据报协议)的转变,解决了几个 TCP 限制并提高了用户的性能和安全性。
TCP连接的缺点:
-
TCP可能会间歇性地挂起数据传输
-
TCP不支持流级复用
-
TCP会产生冗余通信
HTTP3选择UDP作为底层传输层协议。在TCP之上建立新的传输机制,将继承TCP的上述所有缺点。因此,UDP是一个明智的选择。此外,QUIC是在用户层构建的,所以不需要每次协议升级时进行内核修改。
- 灵活的拥塞控制机制
- 更好的错误处理能力
- 更快的握手
…