[前端面试]HTTP相关常问问题

豆子前端

已于 2022-12-14 22:34:27 修改

阅读量230

点赞数

分类专栏：前端文章标签：前端面试 http

于 2022-12-14 22:21:17 首次发布

本文链接：https://blog.csdn.net/qq_41996454/article/details/128323052

版权

前端专栏收录该内容

175 篇文章 11 订阅

订阅专栏

[前端面试]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

浏览器是如何实现Http缓存机制的？

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 协议无状态的含义

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 技术，但是管线化存在诸多问题，比如第一个响应慢还是会阻塞后续响应、服务器为了按序返回相应需要缓存多个响应占用更多资源、浏览器中途断连重试服务器可能得重新处理多个请求、还有必须客户端 - 代理 - 服务器都支持管线化。