前后端之间的网络请求是怎么个事

背景

面试被问到，前端是如何向后端发起请求，后端又是怎么处理前端请求，请求传参和返回数据是以什么形式传输的。第一反应，什么后端处理前端请求？问前端干嘛？没办法，谁让人家是面试官呢，人家想问你，你也不能不让人家问是吧。

1.前端如何向后端发起网络请求？

前端向后端发起网络请求通常通过以下步骤完成：

选择请求库或API：开发者可以选择使用内置的浏览器API如fetch或XMLHttpRequest，也可以使用第三方库如Axios、jQuery.ajax等。这些工具提供了简化和抽象化HTTP请求的方法。
构建请求：开发者需要构建一个HTTP请求，包括URL、请求方法（GET、POST、PUT、DELETE等）、请求头（可选）、请求体（对于POST和PUT请求）等信息。请求体通常是JSON格式的数据，用于向后端发送数据。
发送请求：一旦请求被构建完成，开发者可以使用选择的请求库或API发送请求到后端。发送请求后，前端代码将会等待后端的响应。
处理响应：当后端返回响应时，前端代码需要处理这个响应。这通常包括解析响应体中的数据（如JSON格式的数据），并根据响应来更新页面状态、显示数据、执行其他操作等。
处理错误：在网络请求过程中可能会发生错误，例如网络连接失败、服务器错误等。前端代码应该处理这些错误情况，可能会显示错误消息、进行重试等操作。

总的来说，前端向后端发起网络请求通常需要选择适当的请求库或API，构建请求、发送请求、处理响应和处理错误。

像极了原生Ajax请求的几个步骤：

js 复制代码

//1. 创建对象
const xhr = new XMLHttpRequest();
//2. 初始化 设置请求方法和 url
xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200&c=300');
//3. 发送
xhr.send();
//4. 事件绑定 处理服务端返回的结果
// readystate 是 xhr 对象中的属性, 表示状态 0 1 2 3 4
xhr.onreadystatechange = function(){
    //判断 (服务端返回了所有的结果)
    if(xhr.readyState === 4){
        //判断响应状态码 200  404  403 401 500....
        // 2xx 成功
        if(xhr.status >= 200 && xhr.status < 300){
            //处理结果  行 头 空行 体
            //响应 
            console.log(xhr.status);//状态码
            console.log(xhr.statusText);//状态字符串
            console.log(xhr.getAllResponseHeaders());//所有响应头
            console.log(xhr.response);//响应体
        }
    }

问题来了，为什么要这么传？谁规定的要这么传？

2.什么是HTTP协议？

HTTP（Hypertext Transfer Protocol）是一种用于传输超文本的应用层协议，是Web数据交换的基础。它建立在TCP/IP协议之上，用于客户端和服务器之间的通信。HTTP协议定义了客户端如何发送请求以及服务器如何响应请求，从而实现了信息的传输和交互。

以下是HTTP协议中请求报文和响应报文的基本格式：

请求报文格式：

css 复制代码

[请求行]
[请求头部]
空行
[请求体]

请求行：包含请求方法、请求目标URL和HTTP协议版本。
请求头部：包含了请求的附加信息，如User-Agent、Host、Content-Type等。
空行：请求头部结束的标志，用于分隔请求头部和请求体。
请求体：可选的，包含了发送给服务器的数据，如表单数据、JSON数据等。

响应报文格式：

css 复制代码

[状态行]
[响应头部]
空行
[响应体]

状态行：包含了响应的状态码和状态消息。
响应头部：包含了响应的附加信息，如Content-Type、Content-Length、Cache-Control等。
空行：响应头部结束的标志，用于分隔响应头部和响应体。
响应体：包含了服务器返回给客户端的数据，如HTML、JSON等。

例如，一个简单的GET请求的请求报文和响应报文可能如下所示：

请求报文示例：

sql 复制代码

GET /index.html HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.99 Safari/537.36

响应报文示例：

xml 复制代码

HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 1274

<!DOCTYPE html>
<html>
<head>
    <title>Example Page</title>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

这些报文中的内容描述了客户端和服务器之间的请求和响应交互，其中请求报文指示客户端发送请求到服务器，而响应报文指示服务器向客户端返回响应数据。涉及到几个概念：

请求方式（Request Method）：
- 定义了对资源的操作类型，常见的有GET、POST、PUT、DELETE等。
- 请求行中的方法字段指定了请求的类型。
请求行（Request Line）：
- 包含了请求的方法、URL以及协议版本。
- 请求行的格式为 METHOD URL HTTP/VERSION，例如 GET /index.html HTTP/1.1。
请求头（Request Headers）：
- 包含了关于请求的附加信息，如User-Agent、Content-Type、Authorization等。
- 请求头以键值对的形式在请求行之后传输，每个键值对占据一行，以冒号分隔键和值。
请求体（Request Body）：
- 对于POST、PUT等请求，请求体包含了发送给服务器的数据，例如表单数据、JSON数据等。
- 请求体通常与请求头之后通过一个空行分隔。
响应状态码（Status Code）：
- 用于表示请求的处理结果，指示服务器是否成功处理了请求，以及如何响应客户端的请求。
- 响应行中的状态码字段表示服务器对请求的处理结果，常见的有200（成功）、404（未找到）、500（服务器内部错误）等。
响应头（Response Headers）：
- 包含了关于响应的附加信息，如Content-Type、Content-Length、Cache-Control等。
- 响应头以键值对的形式在响应行之后传输，每个键值对占据一行，以冒号分隔键和值。
响应体（Response Body）：
- 包含了服务器返回给客户端的数据，如HTML、JSON等。
- 响应体通常与响应头之后通过一个空行分隔。

通过这些组成部分，HTTP协议能够实现前后端之间的请求和响应交互，并协商各个方面的细节，包括请求的类型、数据的传输方式以及服务器对请求的处理结果。

3. 前后端请求的数据传输是什么形式传输的？

http协议的请求头和响应头都有一个字段Content-type，字面意思，内容类型。 Content-Type 是 HTTP 报文头部中的一个字段，用于指示实体主体的媒体类型。它告诉客户端或服务器接收到的实体数据是什么类型的，以便正确地处理该数据。Content-Type 的作用包括：

确定数据类型 ：Content-Type 告诉接收方如何解析和处理实体主体数据。例如，如果 Content-Type 是 text/html，则表示实体主体是 HTML 格式的文本数据。
帮助客户端和服务器进行适当的处理：根据 Content-Type，客户端和服务器可以选择适当的处理方式。例如，浏览器根据 Content-Type 来选择正确的解析器来渲染页面。
确保数据的正确传输：Content-Type 有助于确保数据按照正确的格式传输，避免解析错误或数据损坏。

常见的 Content-Type 类型包括但不限于：

text/plain：纯文本格式。
text/html：HTML 格式。
application/json：JSON 格式。
application/xml：XML 格式。
application/x-www-form-urlencoded：表单数据格式。
multipart/form-data：多部分表单数据格式，用于文件上传等。
image/jpeg、image/png、image/gif：图片格式。
audio/mpeg、audio/ogg：音频格式。
video/mp4、video/webm：视频格式。

这些是一些常见的 Content-Type 类型，实际上还有很多其他类型，可以根据具体的应用场景和需要来使用。常见到的一般就是text/html、application/x-www-form-urlencoded、multipart/form-data这些吧。

4. 前后端请求的数据传输是什么数据格式传输的？

首先得明白，这些 Content-Type 类型描述的是数据的媒体类型，而不是数据本身的具体格式。具体来说：

text/plain、text/html、application/json、application/xml 等文本类型：这些类型表示的是文本数据，数据本身是以字符串的形式存在的，可以被解析成文本格式的数据，例如可以被解析成字符串或者对象等。
application/x-www-form-urlencoded、multipart/form-data 等表单数据类型 ：这些类型通常用于传输表单数据，数据格式为键值对的形式，例如 name=value，数据也是以字符串的形式存在的，但是格式需要特殊处理。
image/jpeg、image/png、audio/mpeg 等媒体类型：这些类型表示的是媒体数据，例如图片、音频等，数据本身是以二进制形式存在的，而不是字符串。这些数据可以是文件，也可以是从数据库或其他来源中检索的二进制数据。

总的来说，Content-Type 描述的是数据的媒体类型，而不是数据本身的具体格式。具体的数据格式可能是文本、二进制、文件等，取决于具体的 Content-Type 类型以及数据的内容和来源。 HTTP协议传输的数据本身并没有具体的格式限制，而是由Content-Type字段来指定数据的媒体类型，具体的数据格式取决于这个媒体类型。HTTP协议本身只负责传输数据，而不对数据的内容进行解析或格式化。

根据Content-Type的指定，数据可以是文本、二进制、文件等不同的格式。例如：

当Content-Type为"text/plain"时，数据可以是纯文本字符串。
当Content-Type为"application/json"时，数据通常是JSON格式的字符串。
当Content-Type为"image/jpeg"时，数据是JPEG格式的二进制数据。
当Content-Type为"multipart/form-data"时，数据是一系列键值对，用于传输表单数据和文件。

因此，HTTP协议传输的数据格式是多样的，取决于Content-Type字段指定的媒体类型以及具体的数据内容。

5. 后端收到前端的请求（请求报文）一般需要做哪些处理？

当后端收到前端的请求报文后，一般需要进行以下处理：

解析请求：后端需要解析请求报文，包括解析请求行、请求头部和请求体，以获取请求的方法、URL、参数、请求头等信息。
处理业务逻辑：根据请求的内容，后端执行相应的业务逻辑，可能涉及数据库查询、计算、处理等操作。
生成响应数据：根据业务逻辑的处理结果，后端生成对应的响应数据，可以是文本、JSON、文件等不同格式的数据。
设置响应头部：根据需要，后端设置响应的状态码和响应头部，包括Content-Type、Content-Length等字段。
发送响应报文：最后，后端将生成的响应数据发送给前端，组装成响应报文并通过网络发送给客户端。

对于返回给前端的响应报文，一般包括以下步骤：

设置状态码和响应头部：根据业务逻辑和处理结果，设置响应的状态码和响应头部，确保客户端能够正确处理响应。
组装响应体：将生成的响应数据组装成响应体，可以是文本、JSON、文件等不同格式的数据。
发送响应报文：将组装好的响应数据发送给客户端，组装成响应报文格式，并通过网络发送给客户端。

总的来说，后端收到前端的请求后，需要进行请求的解析、业务逻辑的处理、响应数据的生成和响应报文的发送等操作，以完成对请求的处理，并向前端返回对应的响应。

6.什么是TCP/IP协议？

TCP/IP（Transmission Control Protocol/Internet Protocol）是一组通信协议，用于在网络上进行数据传输和通信。它是Internet的核心协议套件，为互联网上的数据传输提供了可靠性、顺序性和错误检测等功能。TCP/IP协议族由多个协议组成，其中最重要的是TCP（Transmission Control Protocol）和IP（Internet Protocol）。

IP（Internet Protocol）：IP协议是TCP/IP协议族中的网络层协议，负责在网络上进行数据包的路由和转发。它定义了数据包的格式和传输规则，并为每个连接到网络的设备分配唯一的IP地址，以便在网络上进行通信。
TCP（Transmission Control Protocol）：TCP协议是TCP/IP协议族中的传输层协议，提供了可靠的、面向连接的数据传输服务。它负责将数据分割成适合网络传输的数据包，并确保数据包的顺序性、完整性和可靠性，以确保数据的正确传输和接收。

除了TCP和IP之外，TCP/IP协议族还包括其他一些协议，如UDP（User Datagram Protocol）、ICMP（Internet Control Message Protocol）、ARP（Address Resolution Protocol）等，它们共同构成了互联网通信的基础。

总的来说，TCP/IP协议是一组用于网络通信的协议，它提供了互联网数据传输的基础架构和标准，为各种设备之间的通信提供了可靠性、灵活性和互操作性。

7.什么是客户端和服务端三次握手和四次挥手？（经典问题）

TCP协议中，建立连接时采用三次握手，而断开连接时采用四次挥手。下面详细解释三次握手和四次挥手的过程：

三次握手（建立连接）：

客户端发送SYN（同步）报文：客户端向服务器发送一个SYN报文，其中包含客户端的初始序列号（ISN）以及设置SYN标志位。
服务器确认SYN并发送自己的SYN报文：服务器收到客户端的SYN报文后，会确认客户端的SYN，同时也发送一个SYN报文给客户端，其中包含服务器的初始序列号以及设置SYN和ACK标志位。
客户端确认服务器的SYN报文：客户端收到服务器的SYN报文后，会发送一个ACK报文给服务器，确认服务器的SYN报文，同时也设置ACK标志位。至此，连接建立成功。

四次挥手（断开连接）：

客户端发送FIN报文：客户端希望关闭连接时，向服务器发送一个FIN报文，其中设置了FIN标志位，表示客户端已经没有数据要发送了，但是仍然可以接收数据。
服务器确认收到FIN报文：服务器收到客户端的FIN报文后，会发送一个ACK报文给客户端，确认收到了客户端的FIN报文。
服务器发送FIN报文：服务器确认收到客户端的FIN报文后，如果服务器还有数据要发送，会继续发送数据给客户端，然后向客户端发送一个FIN报文，表示服务器也准备关闭连接了。
客户端确认收到服务器的FIN报文：客户端收到服务器的FIN报文后，会发送一个ACK报文给服务器，确认收到了服务器的FIN报文。至此，连接关闭完成。

总的来说，三次握手用于建立连接，客户端和服务器分别发送SYN和ACK报文来确认彼此的状态，而四次挥手用于断开连接，双方各自发送FIN和ACK报文来表示关闭连接的意图，并确认彼此的关闭状态。