No161.精选前端面试题,享受每天的挑战和学习

本文涉及的产品
密钥管理服务KMS,1000个密钥,100个凭据,1个月
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
简介: No161.精选前端面试题,享受每天的挑战和学习

body-parser 中间件

body-parser 是一个常用的 Express 中间件,它用于解析 HTTP 请求的请求体,将请求体中的数据提取出来,并将其附加到请求对象上,以便应用程序能够方便地访问和处理这些数据。

在 Express 中使用 body-parser 中间件有几个主要步骤:

  1. 安装 body-parser 模块:可以使用 npm 或 yarn 进行安装,例如:npm install body-parser.
  2. 引入 body-parser 模块:在 Express 应用程序中引入 body-parser 模块,以便后续可以使用它。
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
  1. 应用 body-parser 中间件:使用 app.use() 方法在应用程序中应用 body-parser 中间件。
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
  1. 上述代码中的 urlencodedjson 方法分别用于处理 application/x-www-form-urlencodedapplication/json 类型的请求体数据。
  2. 访问请求体数据:在路由处理程序中,可以通过请求对象 (req) 的 body 属性来访问请求体数据。
app.post('/api/users', (req, res) => {
  const userData = req.body; // 获取请求体数据
  // 处理请求体数据
  // ...
});

以上就是使用 body-parser 中间件的基本步骤。它使得 Express 应用能够自动解析请求体数据,并将其转换为 JavaScript 对象,以便开发人员可以轻松地获取和处理这些数据。请注意,在 Express 4.16.0 版本及之后的版本中,body-parser 的功能被集成到 Express 核心中,所以不再需要单独安装和引入 body-parser 模块。

如果浏览器端用 post 接口上传图片和一些其他字段, header 里会有什么? koa 里如果不用 body-parser,应该怎么解析?

当浏览器端使用 POST 接口上传图片和其他字段时,请求的 Header 可能包含以下内容:

  1. Content-Type:该字段指定请求体的数据类型。在上传图片时,通常会使用 multipart/form-data 格式。
  2. Content-Disposition:该字段指定如何处理请求体的数据。在上传文件时,通常会设置为 form-data; name="fieldName"; filename="fileName"

如果你在 Koa 中不使用第三方中间件(如 body-parser),你可以手动解析请求体数据。Koa 提供了 ctx.req 对象,它是 Node.js 的 http.IncomingMessage 对象,可以通过该对象访问请求报文的各个部分。

以下是在 Koa 中手动解析上传图片和其他字段的示例:

const Koa = require('koa');
const app = new Koa();
app.use(async ctx => {
  if (ctx.method === 'POST' && ctx.url === '/upload') {
    // 检查是否使用 multipart/form-data 格式
    if (ctx.headers['content-type'].startsWith('multipart/form-data')) {
      // 解析请求体数据
      const body = await parseMultipartFormData(ctx.req);
      const imageFile = body.files.image; // 获取上传的图片文件对象
      const otherFields = body.fields; // 获取其他字段数据
      // 处理文件和其他字段数据
      // ...
    } else {
      ctx.status = 400; // 错误状态码,表示不支持的数据格式
      ctx.body = 'Unsupported data format';
    }
  } else {
    ctx.status = 404; // 错误状态码,表示未找到该路由
    ctx.body = 'Not found';
  }
});
function parseMultipartFormData(req) {
  return new Promise((resolve, reject) => {
    const busboy = new Busboy({ headers: req.headers });
    const body = { files: {}, fields: {} };
    busboy.on('file', (fieldname, file, filename) => {
      // 处理上传的文件
      const chunks = [];
      file.on('data', chunk => chunks.push(chunk));
      file.on('end', () => {
        const data = Buffer.concat(chunks);
        body.files[fieldname] = {
          data,
          filename
        };
      });
    });
    busboy.on('field', (fieldname, value) => {
      // 处理其他字段
      body.fields[fieldname] = value;
    });
    busboy.on('finish', () => {
      resolve(body);
    });
    req.pipe(busboy);
  });
}
app.listen(3000);

需要注意的是,上述示例中使用了 Busboy 模块,它是一个处理 multipart/form-data 格式的流程控制库,负责解析请求体数据。你需要通过 npm install busboy 命令进行安装。

手动解析请求体数据较为复杂,因此在实际开发中,使用 body-parser 或其他相关中间件可以更方便地处理不同类型的请求体数据。

websocket 的连接原理

WebSocket 是一种基于 TCP 的协议,用于在客户端和服务器之间实现全双工通信。它提供了一种持久的连接方式,允许服务器主动向客户端推送数据,而不需要客户端频繁地发送请求。

下面是 WebSocket 连接的基本原理:

  1. 握手阶段(Handshake):
  • 客户端发起 WebSocket 连接请求,通过发送一个 HTTP 请求,其中包含一个特殊的头部字段 Upgrade,其值为 "websocket"
  • 服务器接收到这个 HTTP 请求后,如果同意建立 WebSocket 连接,则返回一个包含特殊头部字段 Upgrade,其值也为 "websocket" 的 HTTP 响应。
  • 客户端在收到服务器的响应后,确认握手成功,连接状态升级为 WebSocket 连接。
  1. 数据传输阶段:
  • 握手成功后,客户端和服务器之间建立了持久的双向连接。
  • 双方可以直接进行数据传输,可以发送文本、二进制数据等。
  • 客户端和服务器可以随时发送消息给对方,不需要依赖传统的请求-响应模式。
  1. 连接关闭阶段:
  • 当任何一方决定关闭连接时,可以发送一个特殊的关闭帧(Close Frame)给对方,表示关闭连接。
  • 接收到关闭帧后,另一方也发送一个关闭帧作为确认,然后双方关闭连接。

WebScoket 的主要特点包括:

  • 低延迟:WebSocket 建立一次连接后,可以持久保持,双方可以实时通信,减少了每次请求的开销。
  • 双向通信:WebSocket 支持全双工通信,客户端和服务器可以随时发送消息给对方,实现实时推送。
  • 更少的数据传输量:每个 WebSocket 数据帧的开销相对较小,不像 HTTP 请求那样需要携带大量的头部信息。

总结而言,WebSocket 通过在握手阶段建立连接后,使用一种更轻量、更高效的协议实现全双工通信,从而提供了可靠的、实时的双向通信能力。这使得 WebSocket 在实时性要求较高的应用场景中表现出色,如聊天应用、实时数据监控等。

https 是如何保证安全的? 是如何保证不被中间人攻击的?

HTTPS(HTTP Secure)是一种通过使用 SSL/TLS 协议对 HTTP 通信进行加密和认证的协议。

它通过以下方式来保证安全性和防止中间人攻击:

  1. 数据加密:
    HTTPS 使用 SSL/TLS 协议对通信数据进行加密,确保在传输过程中的数据是加密的,中间人无法轻易获取敏感信息。SSL/TLS 使用对称加密和非对称加密的组合方式,加密通信内容。
  2. 证书认证:
    HTTPS 中,服务器使用数字证书来验证其身份。数字证书由受信任的第三方机构(证书颁发机构,CA)颁发,确认服务器的真实性。当客户端与服务器建立连接时,服务器将公开自己的数字证书。客户端与服务器之间的通信会使用服务器的公钥加密,以确保只有服务器能够解密和读取通信内容。
  3. 客户端校验:
    客户端可以验证服务器提供的数字证书的合法性。客户端会检查证书的有效性、颁发机构的可信性以及服务器域名与证书中的域名是否匹配。如果存在任何不匹配或证书验证失败的情况,客户端将收到警告或错误提示,可以选择是否继续与服务器建立连接。
  4. 安全报文传输:
    HTTPS 还使用加密的报文传输方式,确保报文在传输过程中不被篡改。每个报文都包含校验和,接收方可以验证报文的完整性,如果报文被篡改,接收方会拒绝处理该报文。

综上所述,HTTPS 通过数据加密和服务器身份验证确保通信的机密性和完整性。中间人无法简单地窃听、修改或伪造通信内容。要确保安全性,服务器需要使用受信任的证书,并遵循最佳的 SSL/TLS 配置实践。客户端也应当对服务器证书进行验证,并识别警告或错误提示。对于用户来说,使用 HTTPS 可以提供更安全的网页浏览和数据传输,减少中间人攻击的风险。

相关文章
|
5天前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
17 0
|
11天前
|
算法 前端开发 Java
数据结构与算法学习四:单链表面试题,新浪、腾讯【有难度】、百度面试题
这篇文章总结了单链表的常见面试题,并提供了详细的问题分析、思路分析以及Java代码实现,包括求单链表中有效节点的个数、查找单链表中的倒数第k个节点、单链表的反转以及从尾到头打印单链表等题目。
23 1
数据结构与算法学习四:单链表面试题,新浪、腾讯【有难度】、百度面试题
|
8天前
|
Java 应用服务中间件 程序员
JVM知识体系学习八:OOM的案例(承接上篇博文,可以作为面试中的案例)
这篇文章通过多个案例深入探讨了Java虚拟机(JVM)中的内存溢出问题,涵盖了堆内存、方法区、直接内存和栈内存溢出的原因、诊断方法和解决方案,并讨论了不同JDK版本垃圾回收器的变化。
17 4
|
28天前
|
Web App开发 前端开发 Linux
「offer来了」浅谈前端面试中开发环境常考知识点
该文章归纳了前端开发环境中常见的面试知识点,特别是围绕Git的使用进行了详细介绍,包括Git的基本概念、常用命令以及在团队协作中的最佳实践,同时还涉及了Chrome调试工具和Linux命令行的基础操作。
「offer来了」浅谈前端面试中开发环境常考知识点
|
9天前
|
JavaScript 前端开发 Java
VUE学习四:前端模块化,ES6和ES5如何实现模块化
这篇文章介绍了前端模块化的概念,以及如何在ES6和ES5中实现模块化,包括ES6模块化的基本用法、默认导出与混合导出、重命名export和import,以及ES6之前如何通过函数闭包和CommonJS规范实现模块化。
28 0
VUE学习四:前端模块化,ES6和ES5如何实现模块化
|
12天前
|
前端开发 JavaScript 小程序
前端新机遇!为什么我建议学习鸿蒙?
【10月更文挑战第4天】前端新机遇!为什么我建议学习鸿蒙?
45 0
前端新机遇!为什么我建议学习鸿蒙?
|
18天前
|
XML 前端开发 Java
Spring,SpringBoot和SpringMVC的关系以及区别 —— 超准确,可当面试题!!!也可供零基础学习
本文阐述了Spring、Spring Boot和Spring MVC的关系与区别,指出Spring是一个轻量级、一站式、模块化的应用程序开发框架,Spring MVC是Spring的一个子框架,专注于Web应用和网络接口开发,而Spring Boot则是对Spring的封装,用于简化Spring应用的开发。
54 0
Spring,SpringBoot和SpringMVC的关系以及区别 —— 超准确,可当面试题!!!也可供零基础学习
|
5天前
|
Web App开发 JavaScript 前端开发
前端Node.js面试题
前端Node.js面试题
|
1月前
|
网络协议 算法 数据库
|
2月前
|
前端开发 算法 网络协议
如何学习计算机基础知识,打好前端和网络安全的基础
如何学习计算机基础知识,打好前端和网络安全的基础
43 4