2023-08-29 15:19 已编辑钱大妈_应用研发部_前端开发工程师

关注

前端面试必备 | 网络请求和HTTP篇(P1-40)

alt

1. 什么是HTTP协议? 请解释其核心概念和工作原理。

HTTP（超文本传输协议）是一种用于在网络上进行通信的协议。 它是用于在Web浏览器和Web服务器之间传输超文本文档的基础协议。

HTTP的核心概念和工作原理如下：

客户端和服务器之间的请求/响应模型：客户端发送一个HTTP请求到服务器，服务器处理该请求并返回一个HTTP响应。
请求方法：HTTP定义了一组请求方法，包括GET、POST、PUT、DELETE等。这些方法用于指定请求的目的以及对资源的处理方式。
URL（统一资源定位符）：HTTP使用URL来标识要请求或响应的资源。URL由协议、服务器地址、端口和资源路径组成。
请求头和响应头：HTTP请求和响应都包含一组头部信息。请求头包含有关请求的元数据，如请求方法、请求主机等。响应头包含关于响应的元数据，如状态码、内容类型等。
状态码：HTTP响应包含一个状态码，用于指示请求的处理结果。常见的状态码包括200（请求成功）、404（未找到）和500（服务器内部错误）等。
内容编码：HTTP支持使用不同的编码格式来传输数据。常见的编码方式包括gzip、deflate和br等，用于压缩数据的大小以提高传输效率。
Cookies和Sessions：HTTP通过使用Cookies或Sessions来维护状态。Cookies是服务器在客户端存储的小段信息，用于跟踪用户的状态，而Sessions是由服务器维护的与用户相关的数据。
缓存：HTTP允许客户端和服务器使用缓存来减少重复请求和提高性能。客户端可以使用响应头中的Cache-Control字段来控制缓存策略。
安全性：HTTP可以通过HTTPS（HTTP Secure）来提供安全的通信，使用TLS或SSL加密数据以防止窃听和篡改。

alt

总之，HTTP是一种用于在客户端和服务器之间传输超文本文档的协议，它通过请求和响应模型来进行通信，并使用URL、请求方法、状态码等概念来定义和控制数据的传输。

2. HTTP的请求方法有哪些? 请分别描述GET、POST、PUT和DELETE方法的作用。

HTTP的请求方法有GET、POST、PUT和DELETE等。

GET方法用于获取资源，即从服务器端获取特定资源的信息。该方法的请求参数通过URL的查询字符串传递，通常用于读取数据。GET方法是幂等的，即多次执行的结果应该是相同的，不会对资源产生影响。
POST方法用于向服务器提交数据，以创建新的资源。该方法的请求参数通常通过请求体传递，用于向服务器发送数据，比如提交表单、上传文件等。POST方法不是幂等的，即多次执行可能会创建多个相同的资源。
PUT方法用于更新资源，即向服务器更新指定资源的信息。该方法的请求参数也通过请求体传递，用于更新服务器端资源的数据。PUT方法是幂等的，即多次执行的结果应该是相同的。
DELETE方法用于删除资源，即请求服务器删除指定资源。该方法通常不包含请求体，直接通过URL标识要删除的资源。DELETE方法是幂等的，即多次执行对同一资源的DELETE请求不会产生额外的影响。

这些HTTP请求方法在前端开发中经常被使用，掌握它们的作用和用法对于开发的网络请求非常重要。

3. 什么是URI和URL? 它们之间有什么区别?

URI (Uniform Resource Identifier) 是用于标识和定位资源的字符串。它可以包含 URL (Uniform Resource Locator) 或 URN (Uniform Resource Name) 的子集。URI 用于表示某个资源的唯一标识。

URL 是一种特定的 URI 类型，用于标识资源的位置。它包含了访问资源所需的协议、服务器名称和路径等信息。URL 包括了资源的位置信息，可以直接用于访问资源。

URI 和 URL 的区别在于它们的范围。URI 是用于唯一标识资源的字符串，而 URL 是 URI 的一种具体实现，提供了用于访问资源的详细信息。换句话说，URL 是 URI 的一个特例，表示资源的位置和如何访问资源。

4. 什么是HTTP状态码? 简要解释常见的状态码及其含义。

HTTP状态码是指在HTTP协议中，服务器对于客户端请求的处理结果的标识码。它由三位数字组成，每个状态码代表了不同的含义。

以下是一些常见的HTTP状态码及其含义：

1xx（信息类状态码）：表示请求已接收，需要客户端继续操作。

100（继续）：表示服务器已接收到请求的初始部分，客户端可以继续发送请求的剩余部分。

2xx（成功状态码）：表示请求已成功被服务器接收、理解和处理。

200（成功）：表示请求已成功。常用于GET和POST请求。
201（已创建）：表示请求已经被服务器成功处理，并且创建了新的资源。
204（无内容）：表示服务器成功处理了请求，但没有返回任何内容。

3xx（重定向状态码）：表示需要进一步的操作才能完成请求。

301（永久重定向）：表示请求的资源已被永久移动到新位置。
302（临时重定向）：表示请求的资源已被暂时移动到新位置。
304（未修改）：表示客户端发送的请求资源未被修改。

4xx（客户端错误状态码）：表示客户端发送的请求有错误。

400（错误请求）：表示客户端发送的请求语法有误。
401 （未授权）：表示请求需要身份验证。
404 （未找到）：表示请求的资源不存在。

5xx（服务器错误状态码）：表示服务器在处理请求时发生了错误。

500 （服务器内部错误）：表示服务器在执行请求时遇到了错误。
503 （服务不可用）：表示服务器暂时无法处理请求，通常是因为服务器过载或正在进行维护。

这些状态码帮助客户端了解服务器对请求的处理情况，并根据不同的状态码采取相应的操作。

alt

5. 什么是GET请求和POST请求? 它们的区别是什么?

GET请求和POST请求是HTTP协议中最常用的两种请求方法。

GET请求用于从服务器获取指定资源的数据。当浏览器请求一个URL时，它通常发送一个GET请求。GET请求的参数是在请求的URL中以查询字符串的形式发送的。这些参数可以通过在URL中添加键值对来传递给服务器。GET请求是幂等的，也就是说多次发送相同的GET请求不会对服务器产生任何副作用，并且可以被缓存。

POST请求用于向服务器提交数据，例如表单数据。POST请求的参数是通过请求正文发送的，而不是直接在URL中传递。POST请求可以发送大量数据，且不会像GET请求那样对URL长度有限制。POST请求不是幂等的，多次发送相同的POST请求可能会导致服务器上的状态发生改变。

GET和POST请求在以下方面存在区别：

参数传递方式：GET请求将参数以查询字符串的形式附加到URL上，而POST请求将参数放在请求正文中。
数据体积：GET请求的数据大小受URL长度限制，通常用于获取少量数据；而POST请求可以发送大量数据。
安全性：GET请求将参数暴露在URL中，因此不适合传输敏感数据；POST请求将参数放在请求正文中，相对更安全。
幂等性：GET请求是幂等的，多次发送相同的GET请求不会对服务器产生任何副作用；POST请求不是幂等的，多次发送相同的POST请求可能会导致服务器状态改变。

alt

根据不同的使用场景和需求，选择适合的请求方法至关重要。GET请求适用于获取数据，而POST请求适用于提交数据。

6. 什么是HTTP头? 请列举几个常见的HTTP头字段并解释其作用。

HTTP头是HTTP协议中的一部分，用于在请求和响应中传递附加的信息。 HTTP头由字段名和字段值组成，用冒号分隔，每个字段占据一行。

以下是几个常见的HTTP头字段及其作用：

User-Agent：指明发送请求的客户端应用程序的类型和版本。服务器可以根据这个头字段来判断用户的设备或浏览器类型，以提供适合的内容。例：User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.3
Content-Type：指定请求或响应中传输的数据的MIME类型。对于请求，它告诉服务器请求正文的内容类型；对于响应，它告诉浏览器响应正文的内容类型。例：Content-Type: application/json
Content-Length：指定请求或响应正文的字节数。服务器可以使用此字段来确定正文的长度，从而正确解析请求或响应。例：Content-Length: 348
Accept：指定客户端能够处理的响应内容类型。浏览器在发送请求时使用此字段，以告诉服务器它可以接受哪些类型的响应。例：Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,/;q=0.8
Authorization：用于在请求中传递身份验证信息，通常用于保护需要授权访问的资源。例：Authorization: Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ==
Cookie：用于在请求中传递保存在客户端的会话信息。服务器可以使用此字段来识别和验证用户。例：Cookie: sessionId=ABC123

这些是HTTP头字段中的一些常见例子。HTTP头字段的作用是在请求和响应之间传递额外的信息，以便客户端和服务器可以根据需要进行适当的处理。不同的HTTP头字段有不同的作用，可以用于传递身份验证信息、内容类型、缓存控制等。

7. 什么是Cookie? 如何在HTTP请求中发送和接收Cookie?

Cookie是一种在客户端和服务器之间传递数据的机制。它是由服务器发送给客户端的小型文本文件，保存在客户端的浏览器中。每当浏览器向同一服务器发送请求时，它会自动将相关的Cookie信息包含在请求中，以便服务器可以使用这些信息来提供个性化的服务。

要在HTTP请求中发送和接收Cookie，可以按照以下步骤操作：

服务器发送Cookie：当服务器发送响应时，可以通过设置响应头中的Set-Cookie字段来发送Cookie。Set-Cookie字段的值是一个包含Cookie属性的字符串，例如：
```
Set-Cookie: name=value; Expires=Wed, 21 Oct 2022 07:28:00 GMT; Path=/
```
浏览器存储Cookie：一旦浏览器接收到带有Set-Cookie字段的响应，它会将Cookie保存在本地。每个Cookie都与特定的域名相关联，并且在指定的路径下有效。
浏览器发送Cookie：当浏览器向服务器发送请求时，它会自动将与该域相关的所有Cookie包含在请求头的Cookie字段中，例如：
```
Cookie: name=value; other_cookie=other_value
```
服务器使用Cookie：服务器在接收到请求后可以通过读取请求头的Cookie字段来获取客户端发送的Cookie数据，并使用它们进行个性化处理或提供特定的功能。

需要注意的是，Cookie具有一些属性，如过期时间（Expires或Max-Age），路径（Path）、域名（Domain）、安全属性（Secure）等，用于控制Cookie的行为和访问。此外，浏览器还可以为Cookie设置HttpOnly属性，使得Cookie值无法被JavaScript脚本访问，从而提高安全性。

这就是在HTTP请求中发送和接收Cookie的基本原理。通过Cookie，服务器可以跟踪和存储用户的会话信息，以提供更个性化和有针对性的服务。

8. 什么是会话和会话管理? 如何使用Cookie和Session实现会话管理?

会话是指服务器和客户端之间的一系列交互过程，用于保持用户状态和跟踪用户在网站上的活动。会话管理是指服务器如何管理和维护与每个用户相关的会话信息。

会话管理可以使用Cookie和Session来实现。

使用Cookie实现会话管理：

服务器在客户端的浏览器中设置一个唯一的标识符（通常称为会话ID）作为Cookie的值。
客户端的浏览器保存该Cookie，并在每次向服务器发送请求时将该Cookie包含在请求头的Cookie字段中。
服务器通过读取Cookie中的会话ID来识别和关联客户端的会话信息。

使用Session实现会话管理：

客户端发送请求时，服务器为该用户创建一个唯一的会话ID，并将会话ID保存在服务器端的某种数据存储中（如内存、数据库等）。
服务器将会话ID发送回客户端的浏览器，可以通过Cookie方式发放，也可以在URL中进行传递。
客户端的浏览器保存该会话ID，并在后续的请求中将会话ID包含在请求中（Cookie方式或URL参数方式）。
服务器通过读取请求中的会话ID来关联客户端的会话信息。

无论是使用Cookie还是Session，它们都用于维护和跟踪用户的会话状态。Cookie是在客户端存储的，相对便于实现和操作，并且可以设置过期时间。Session是在服务器端存储的，可以存储更多的信息，对客户端不可见，但服务器需要进行存储和管理。

在实际应用中，可根据需求和安全性来选择使用Cookie还是Session，或者结合两者进行会话管理。

9. 什么是跨域请求? 如何解决跨域问题?

跨域请求是指在浏览器上，通过 JavaScript 在一个域（即网站的域名）上发起的 HTTP 请求，试图访问另一个域上的资源。根据同源策略（Same-Origin Policy），浏览器限制了跨域请求，以防止恶意行为。同源策略要求，协议、域名和端口必须完全一致才能进行跨域请求。

为了解决跨域问题，有几种常见的方法：

JSONP（JSON with Padding）: JSONP 是一种利用 <script> 标签不受同源策略限制的特性来实现跨域请求的方法。可以通过动态创建 <script> 标签来请求跨域脚本，而跨域脚本会包装在一个回调函数中，从而达到获取数据的目的。
跨域资源共享（Cross-Origin Resource Sharing，CORS）: CORS 是一种在服务器端设置的机制，允许服务器声明哪些跨域请求是被允许的。通过在服务器响应中设置特定的头信息，例如 Access-Control-Allow-Origin，来指定哪些源（域名）被允许跨域访问。
代理服务器: 通过设置代理服务器，将跨域请求转发到同一个域中，然后再将响应返回给浏览器。这种方法需要在后端进行配置和处理。
WebSocket: 由于 WebSocket 是一种基于消息的双向通信协议，在建立连接时并没有受到跨域限制，因此可以通过 WebSocket 进行跨域通信。

选择哪种方法解决跨域问题取决于具体的需求和后端支持的能力。通常情况下，使用 CORS 是最常见和推荐的方法。

10. 什么是同源策略? 它如何限制Web页面的操作?

同源策略是一种浏览器安全机制，它限制了Web页面中的JavaScript代码如何与不同源（域名、协议、端口）的资源进行交互。同源策略的实施是为了保护用户的隐私和安全，防止恶意网站通过代码进行跨站点攻击。

同源策略限制了以下操作：

脚本访问不同源上的文档内容：JavaScript无法直接访问来自其他域的文档对象模型（DOM），因此无法读取或操作页面上的数据。
跨域请求：不同源的网站之间不能直接进行XMLHttpRequest或fetch等网络请求，这是为了防止恶意网站获取用户的敏感信息或执行未经授权的操作。
Cookie、LocalStorage和IndexedDB访问限制：不同源的页面无法读取或写入彼此的Cookie、LocalStorage或IndexedDB存储。
脚本访问跨源资源：脚本无法引用其他域上的资源文件（例如JavaScript、CSS和图像），除非目标域明确允许这样的访问。

alt

同源策略可以确保用户的数据和操作受到保护，但它也带来了一些开发挑战，特别是在构建跨域应用程序时。为了克服同源策略的限制，可以使用一些解决方案，例如JSONP、CORS、代理服务器和WebSockets。

11. 什么是CORS? 如何通过配置HTTP头来启用CORS?

CORS（Cross-Origin Resource Sharing）是一种机制，允许服务器在响应中设置HTTP头来指定哪些源（域）具有权限访问资源。它用于解决跨域请求的安全限制问题。

要通过配置HTTP头来启用CORS，服务器需要在响应中添加特定的HTTP头。以下是常见的CORS相关头的配置：

Access-Control-Allow-Origin：指定哪些源可以访问资源。可以设置为具体的域名，例如Access-Control-Allow-Origin: https://example.com，或设置为*表示允许任何来源访问。这个头是必需的，否则默认情况下浏览器会阻止访问。
Access-Control-Allow-Methods：指定允许的HTTP方法。例如，Access-Control-Allow-Methods: GET, POST, PUT, DELETE。
Access-Control-Allow-Headers：指定允许的自定义HTTP头。例如，Access-Control-Allow-Headers: Content-Type, Authorization。
Access-Control-Expose-Headers：指定哪些HTTP头可以暴露给客户端。默认情况下，只有简单的HTTP头（如Cache-Control、Content-Language、Content-Type等）会被暴露给客户端。

为了启用CORS，服务器应该在处理请求时检查请求头中的Origin字段，并根据需要设置上述CORS相关的响应头。这样，浏览器就能根据响应头信息判断是否允许跨域请求。请注意，CORS必须由服务器进行配置，客户端无法手动启用或禁用。

12. 什么是JSON? 如何在HTTP请求中发送和接收JSON数据?

JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式，它是一种易于人阅读和编写的文本格式，并且易于机器解析和生成。

在HTTP请求中发送和接收JSON数据，可以按照以下步骤进行：

发送JSON数据：将要发送的数据转换为JSON格式字符串，并设置请求头中的Content-Type为"application/json"。可以使用编程语言中的JSON序列化功能将数据转换为JSON格式，然后将转换后的JSON字符串作为请求正文发送到服务器。

示例（使用JavaScript）：

var data = { name: "John", age: 30 };
var jsonData = JSON.stringify(data);

var xhr = new XMLHttpRequest();
xhr.open("POST", "http://example.com/api", true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.send(jsonData);

接收JSON数据：服务器返回的响应应该包含JSON格式的数据。通过解析响应体中的JSON数据，我们可以在客户端使用这些数据。可以根据编程语言的相关API将响应的JSON字符串转换为可以操作的对象或数据结构。

示例（使用JavaScript）：

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      var jsonResponse = JSON.parse(xhr.responseText);
      // 在这里处理响应的JSON数据
    } else {
      // 处理请求错误
    }
  }
};
xhr.open("GET", "http://example.com/api", true);
xhr.send();

需要注意的是，在发送和接收JSON数据时，需要确保正确设置请求和响应的Content-Type为"application/json"。这样可以确保服务器和客户端能够识别并正确处理JSON数据。

13. 什么是RESTful API? 请描述常见的RESTful API设计规范和最佳实践。

RESTful API是一种基于HTTP协议的Web服务架构风格，它以资源为中心，通过HTTP方法（如GET、POST、PUT、DELETE）对资源进行操作。

下面是一些常见的RESTful API设计规范和最佳实践：

使用清晰的资源命名：API的端点应该使用名词，而不是动词。例如，使用"/users"来表示用户资源的集合，使用"/users/{id}"来表示单个用户资源。
使用HTTP方法进行操作：使用HTTP的不同方法（GET、POST、PUT、DELETE）对资源进行不同的操作。GET用于获取资源，POST用于创建资源，PUT用于更新资源，DELETE用于删除资源。
使用HTTP状态码：正确使用HTTP状态码可以提供有关请求结果的信息。常见的状态码有200表示成功，201表示资源创建成功，400表示客户端请求错误，404表示资源不存在等。
使用资源版本控制：在API中引入版本控制是一种良好的实践，可以确保对API进行更改时不会破坏现有的客户端应用程序。
使用合适的数据格式：常见的数据格式包括JSON和XML，但根据需求也可以选择其他的格式。JSON是当前最常用的格式，因为它是轻量级的、易于阅读和解析的。
使用正确的HTTP头部信息：使用合适的Content-Type头部信息来指示请求或响应中的数据格式，并使用合适的Accept头部信息来指示客户端期望的响应数据格式。
使用URI来表示关系：在URL中使用合适的路径表示资源之间的层次关系或关联关系，遵循RESTful风格。
提供合适的错误处理：在API中，要提供清晰和有用的错误信息，包括错误代码、错误消息和可能的解决方案。
使用认证和授权机制：对于需要身份验证和授权的API操作，应该实施适当的安全措施，如使用API密钥、OAuth等来保护资源的访问。

alt

这些规范和最佳实践有助于提高API的一致性、可读性和可预测性，使其更易于使用和集成到其他应用程序中。

14. 什么是AJAX? 如何使用原生JavaScript和XMLHttpRequest对象发送AJAX请求?

AJAX（Asynchronous JavaScript and XML）是一种用于在后台与服务器进行数据交换的技术。它使用 JavaScript 和 XMLHttpRequest 对象发送异步请求并接收服务器返回的数据，而无需刷新整个页面。

要使用原生 JavaScript 和 XMLHttpRequest 对象发送 AJAX 请求，可以按照以下步骤进行操作：

创建一个新的 XMLHttpRequest 对象：

var xhr = new XMLHttpRequest();

设置请求的方法、URL 和是否使用异步模式（通常为 true）：

xhr.open('GET', 'http://example.com/api', true);

设置请求完成后的回调函数：

xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
    // 处理服务器返回的响应数据
  }
};

设置请求头和发送请求：

xhr.setRequestHeader('Content-Type', 'application/json'); // 设置请求头
xhr.send(); // 发送请求，如果有请求体可以在 send() 方法中传入

在回调函数中处理服务器返回的响应数据：

var responseData = JSON.parse(xhr.responseText); // 将服务器返回的 JSON 数据解析为 JavaScript 对象
// 处理 responseData

需要注意的是，以上是基本的 AJAX 请求示例，具体的代码可能会根据实际需求和后端 API 的要求有所差异。在实际开发中，你可能还需要处理错误状态码、处理请求超时等情况，以及在发送 POST 请求时设置请求体数据等。

此外，现代的 JavaScript 开发中也有很多基于 Promise 的 AJAX 库（如 Axios、Fetch 等），它们提供了更简洁和易用的 API，可以进一步简化发送 AJAX 请求的过程。

15. 什么是Promise? 如何使用Promise来处理异步操作?

Promise 是一种用于处理异步操作的 JavaScript 对象。它可以解决回调地狱（callback hell）的问题，并更清晰地表达异步代码的逻辑。

Promise 对象代表一个异步操作的最终完成（或失败）及其结果的表示。它有三种状态：pending（进行中）、fulfilled（已完成）和rejected（已拒绝）。

Promise 对象有两个主要的方法可用于处理异步操作：

then() 方法：用于指定当 Promise 对象状态变为 fulfilled（已完成）时的回调函数，即异步操作成功时应执行的操作。then() 方法可以通过链式调用，以处理多个异步操作。

promise.then(function(result) {
  // 异步操作成功，执行相应操作
}).catch(function(error) {
  // 异步操作失败，执行错误处理操作
});

catch() 方法：用于指定当 Promise 对象状态变为 rejected（已拒绝）时的回调函数，即异步操作失败时应执行的操作。catch() 方法通常用于处理错误。

Promise 还提供了其他一些方法，如 all()、race() 等，用于处理多个 Promise 对象的组合和竞争。

下面是一个使用 Promise 处理异步操作的示例：

function fetchData() {
  return new Promise(function(resolve, reject) {
    // 异步操作，可以是发送 AJAX 请求、读取文件等
    // 操作成功时调用 resolve()，并传递相应结果
    // 操作失败时调用 reject()，并传递错误信息

    if

剩余60%内容，订阅专栏后可继续查看/也可单篇购买

前端面试必备文章被收录于专栏

前端面试必备知识点：HTML和CSS、JS(变量/数据类型/操作符/条件语句/循环;面向对象编程/函数/闭包/异步编程/ES6)、DOM操作、HTTP和网络请求、前端框架、前端工具和构建流程、浏览器和性能优化、跨浏览器兼容性、前端安全、数据结构和算法、移动端开发技术、响应式设计、测试和调试技巧、性能监测等。准备面试时，建议阅读相关的技术书籍、参与项目实践、刷题和练习，以深化和巩固你的知识。