【HTTP、Web常用协议等等】前端八股文面试题

HTTP、Web常用协议等等

文章目录

  • HTTP、Web常用协议等等
      • 1. 网络请求的状态码有哪些?
          • 1)1xx 信息性状态码
          • 2)2xx 成功状态码
          • 3)3xx 重定向状态码
          • 4)4xx 客户端错误状态码
          • 5)5xx 服务器错误状态码
      • 2.在 Web 开发中常用的协议和标准有哪些?
          • 1)协议
          • 2)标准
      • 3.如何处理跨域问题?
          • 1)CORS(跨源资源共享)
          • 2)JSONP(JSON with Padding)
          • 3)代理
          • 4) iframe + postMessage
          • 5) WebSocket
      • 4.get请求传参长度的误区、get和post请求在缓存方面的区别
          • 1)误区:
          • 2)实际上 HTTP协议 从未规定 GET/POST 的请求长度限制是多少。
          • 3)在缓存方面的区别:
      • 5.简单说说,你对 token 的理解
          • 1)概念
          • 2)作用
          • 3)特点
      • 6.简单说说,你对 axios 的理解
          • 1)概述
          • 2)主要特点
          • 3)应用场景
      • 7. ajax原理
          • 1)基本概念
          • 2)工作流程
          • 3)优点

1. 网络请求的状态码有哪些?

1)1xx 信息性状态码
  • 100 Continue:表示目前为止一切正常,客户端可以继续发送请求或者忽略这个响应。
  • 101 Switching Protocols:服务器根据客户端的请求切换协议。
2)2xx 成功状态码
  • 200 OK:最常见的成功状态码,表示请求已成功,响应主体包含所请求的资源。
  • 201 Created:表示请求成功并且服务器创建了新的资源。
  • 202 Accepted:表示服务器已接受请求,但尚未处理。
  • 204 No Content:表示请求成功,但响应没有实体内容。
3)3xx 重定向状态码
  • 301 Moved Permanently:表示请求的资源已被永久移动到新位置,浏览器会自动重定向到新位置。
  • 302 Found:表示请求的资源临时被移动到其他位置,浏览器会自动重定向到新位置。但与 301 不同的是,这个重定向可能是临时的。
  • 303 See Other:表示请求的资源存在另一个 URI,应使用 GET 方法获取该资源。
  • 304 Not Modified:表示资源未被修改,客户端可以使用缓存的版本。
  • 307 Temporary Redirect:与 302 类似,但客户端应保持请求方法不变进行重定向。
4)4xx 客户端错误状态码
  • 400 Bad Request:表示请求有语法错误或请求无法被服务器理解。
  • 401 Unauthorized:表示请求需要用户认证,通常是因为没有提供有效的身份验证凭证。
  • 403 Forbidden:表示服务器理解请求,但拒绝执行,通常是因为用户没有足够的权限访问资源。
  • 404 Not Found:表示服务器找不到请求的资源。
  • 405 Method Not Allowed:表示请求方法不被允许,例如使用了 POST 请求但服务器只允许 GET 请求。
  • 406 Not Acceptable:表示服务器无法根据客户端的请求头返回满足要求的资源。
  • 408 Request Timeout:表示客户端请求超时,服务器在规定时间内没有收到完整的请求。
  • 409 Conflict:表示请求与服务器的当前状态冲突,例如提交的内容与已有资源冲突。
  • 429 Too Many Requests:表示客户端发送的请求过多,超出了服务器的限制。
5)5xx 服务器错误状态码
  • 500 Internal Server Error:表示服务器内部错误,通常是服务器遇到了意外情况,无法完成请求。
  • 501 Not Implemented:表示服务器不支持请求的功能,无法完成请求。
  • 502 Bad Gateway:表示作为网关或者代理的服务器,从上游服务器接收到无效的响应。
  • 503 Service Unavailable:表示服务器暂时不可用,通常是由于服务器过载或正在进行维护。
  • 504 Gateway Timeout:表示作为网关或者代理的服务器,在等待上游服务器响应时超时。
  • 505 HTTP Version Not Supported:表示服务器不支持请求中使用的 HTTP 版本。

2.在 Web 开发中常用的协议和标准有哪些?

1)协议
  • HTTP(HyperText Transfer Protocol,超文本传输协议)
    • 是用于在 Web 浏览器和 Web 服务器之间传输数据的基础协议。
    • 目前主要使用的版本是 HTTP/1.1 和 HTTP/2。HTTP/2 相比 HTTP/1.1 有更高的性能,支持多路复用、头部压缩等特性。
    • 特点包括无状态、基于请求/响应模式等。
  • HTTPS(HyperText Transfer Protocol Secure,超文本传输安全协议)
    • 在 HTTP 的基础上通过 SSL/TLS 加密来确保数据传输的安全。
    • 广泛用于需要保护用户数据(如登录信息、支付信息等)的场景。
    • 提供了数据加密、身份验证和数据完整性校验等功能。
  • FTP(File Transfer Protocol,文件传输协议)
    • 虽然在 Web 开发中不是主要用于网页传输,但在一些场景下可能用于文件上传和下载,例如网站后台管理中上传文件到服务器。
    • 支持两种模式:主动模式和被动模式。
  • WebSocket
    • 一种在单个 TCP 连接上进行全双工通信的协议。
    • 允许服务器主动向客户端推送数据,而不仅仅是客户端请求后服务器响应的模式。
    • 常用于实时通信应用,如在线聊天、实时数据更新等。
2)标准
  • HTML(HyperText Markup Language,超文本标记语言)
    • 用于创建网页的结构和内容。
    • 目前 HTML5 是广泛使用的版本,支持丰富的多媒体元素、语义化标签、本地存储等特性。
  • CSS(Cascading Style Sheets,层叠样式表)
    • 用于控制网页的外观和布局。
    • CSS3 引入了很多新特性,如动画、渐变、弹性布局等。
  • JavaScript
    • 一种客户端脚本语言,用于为网页添加交互性和动态效果。
    • 有众多的框架和库,如 React、Vue.js、Angular 等,遵循 ECMAScript 标准。
  • REST(Representational State Transfer,表述性状态转移)
    • 一种软件架构风格,用于设计 Web 服务。
    • 强调资源的概念,通过 HTTP 方法(GETPOSTPUTDELETE 等)对资源进行操作。
  • JSON(JavaScript Object Notation,JavaScript 对象表示法)
    • 一种轻量级的数据交换格式。
    • 常用于 Web 服务之间的数据传输以及与前端的交互。
  • XML(eXtensible Markup Language,可扩展标记语言)
    • 另一种常用的数据交换格式。
    • 虽然不如 JSON 简洁,但具有良好的扩展性和自描述性。

3.如何处理跨域问题?

跨域问题是由同源政策(Same-Origin Policy)引起的,浏览器出于安全考虑限制 JavaScript 在一个源(域、协议、端口)上与另一个源进行交互。下面是一些处理跨域问题的方法:

1)CORS(跨源资源共享)

CORS 是一种机制,允许服务器通过在响应中添加特定 HTTP 头部来指示哪些源可以访问资源。
示例代码:

// 服务器端响应头可以如下设置:
Access-Control-Allow-Origin: *
// 或者指定特定源:
Access-Control-Allow-Origin: https://example.com

// 在 Node.js(Express)的例子中:
const express = require('express'); 
const cors = require('cors');
const app = express();
app.use(cors()); // 允许所有跨域请求  
// 或者 
app.use(cors({ origin: 'https://example.com', // 只允许特定源 })); 
app.get('/data', (req, res) => { res.json({ message: 'Hello, world!' }); }); 
app.listen(3000, () => { console.log('Server running on port 3000'); });
2)JSONP(JSON with Padding)

JSONP 是一种非官方的跨域请求方式,它利用

示例代码:
//客户端下载数据:
function handleResponse(data) { console.log(data); } 
const script = document.createElement('script'); 
script.src = 'https://example.com/data?callback=handleResponse'; 
document.body.appendChild(script);

//服务器响应:
handleResponse({ message: 'Hello, world!' });
3)代理

通过设置同源服务器(如 Webpack dev server 或 Nginx)代理请求,可以有效避免跨域问题。客户端的请求会先发送到代理服务器,代理服务器再请求目标服务器的数据。

Webpack 示例配置:
webpack.config.js module.exports = { 
devServer: { proxy: { '/api': { target: 'http://api.example.com', changeOrigin: true, }, }, }, };
4) iframe + postMessage

如果应用的两个部分可以通过 iframe 嵌套的方式共存,可以使用 postMessage 方法实现跨域消息传递。

示例代码:
//主窗口发送消息:
const iframe = document.getElementById('my-iframe'); 
iframe.contentWindow.postMessage('Hello from parent', 'https://example.com');

//iframe 接收消息:
window.addEventListener('message', (event) => { 
if (event.origin === 'https://parent-origin.com') { console.log(event.data); // 处理消息 } });
5) WebSocket

WebSocket 协议不受同源政策的限制,可以用于跨域通信。需要服务器和客户端都支持 WebSocket。

示例代码:
const socket = new WebSocket('ws://example.com/socket'); 
socket.onopen = function(event) { socket.send('Hello Server!'); }; 
socket.onmessage = function(event) { console.log(event.data); };

总结
选择合适的跨域解决方案取决于具体的情况,通常情况下,CORS 是最常见和推荐的方案。
如果控制服务器端,那么配置 CORS 将是最高效的方式。
如果不能改动服务器,其他方式如 JSONP 和代理也可以考虑。

4.get请求传参长度的误区、get和post请求在缓存方面的区别

1)误区:
  • 我们经常认为get请求参数长度存在限制,
  • post请求参数长度是无限制的。
2)实际上 HTTP协议 从未规定 GET/POST 的请求长度限制是多少。
  • get请求参数的限制是来源与浏览器或 web 服务器,浏览器或 web 服务器限制了url的长度。
  • 为了明确这个概念,我们必须再次强调下面几点:
    • HTTP 协议 未规定 GET/POST 的长度限制;
    • GET 的最大长度限制是因为浏览器和web服务器限制了 URI 的长度;
    • 不同的浏览器和 web 服务器,限制的最大长度不一样;
    • 要支持 IE,则最大长度为 2083 byte ,若只支持 Chrome,则最大长度 8182byte。
3)在缓存方面的区别:
  • Get请求:类似于查找的过程,用户获取数据,可以不用每次都与数据库连接,可以使用缓存;
  • Post请求:一般是修改和删除的工作,必须与数据库交互,不能使用缓存。

5.简单说说,你对 token 的理解

1)概念
  • Token 是一种用于身份验证和授权的凭证。
  • 在网络应用中,它通常是一个字符串,代表着用户的身份或者特定的权限。
2)作用
  • 身份验证
    • 当用户登录系统时,服务器验证用户的身份信息(如用户名和密码)后,会生成一个 token 并返回给客户端。
    • 客户端在后续的请求中携带这个 token,服务器通过验证 token 的有效性来确定用户的身份,而无需每次都要求用户重新输入用户名和密码。
    • 例如,在一个移动应用中,用户登录后,应用会保存 token,在后续与服务器的交互中,将 token 包含在请求头中,服务器据此识别用户身份。
  • 授权访问
    • Token 可以包含特定的权限信息,决定用户可以访问哪些资源和执行哪些操作。
    • 服务器可以根据 token 中的权限标识来控制用户对不同功能和数据的访问。
    • 比如,一个企业管理系统中,不同的用户角色可能有不同的权限,token 可以明确标识用户的角色和相应的权限范围。
3)特点
  • 无状态性
  • 服务器不需要在内存中存储每个用户的会话状态,只需要验证 token 的有效性。
  • 这使得服务器可以更轻松地扩展,并且减少了服务器的资源消耗。
  • 例如,在分布式系统中,多个服务器可以独立地验证 token,而不需要共享用户会话信息。
  • 安全性
    • Token 可以使用加密技术进行签名,确保其在传输过程中不被篡改。
    • 一些 token 还可以设置过期时间,增加了系统的安全性。
    • 例如,JSON Web Token(JWT)使用数字签名来保证其完整性和真实性,并且可以设置较短的过期时间,以减少被攻击的风险。
  • 灵活性
  • Token 可以在不同的平台和设备上使用,包括 Web 应用、移动应用和 API 调用。
  • 它可以适应不同的身份验证和授权需求,并且可以与各种技术栈集成。
  • 例如,一个基于微服务架构的系统中,不同的服务可以使用相同的 token 进行身份验证和授权,提高了系统的可维护性和可扩展性。

6.简单说说,你对 axios 的理解

1)概述
  • Axios 是一个基于 Promise 的 HTTP 客户端,用于在浏览器和 Node.js 中发送 HTTP 请求。
  • 它可以方便地与现代 JavaScript 框架(如 Vue、React 和 Angular)集成,提供了简洁的 API 和强大的功能。
2)主要特点
  • 支持 Promise API
    • Axios 的所有请求方法都返回 Promise 对象,使得异步请求的处理更加简洁和可读。可以使用thencatch方法来处理请求的成功和失败情况。
    • 例如:
      axios.get('/api/data')
       .then(response => {
          console.log(response.data);
        })
       .catch(error => {
          console.error(error);
        });
      
  • 支持多种请求方法
    • Axios 支持常见的 HTTP 请求方法,如 GET、POST、PUT、DELETE、PATCH 等。可以轻松地发送不同类型的请求,并传递相应的请求参数。
    • 例如:
      // GET 请求
      axios.get('/api/users', { params: { page: 1, limit: 10 } });
      // POST 请求
      axios.post('/api/users', { name: 'John', age: 30 });
      
  • 拦截器
    • Axios 提供了请求拦截器和响应拦截器,可以在请求发送前和响应返回后进行一些预处理操作。
    • 请求拦截器可以用于添加请求头、设置认证信息、处理请求参数等。响应拦截器可以用于统一处理错误、格式化响应数据等。
    • 例如:
      // 请求拦截器
      axios.interceptors.request.use(config => {
        config.headers['Authorization'] = 'Bearer ' + token;
        return config;
      }, error => {
        return Promise.reject(error);
      });
      // 响应拦截器
      axios.interceptors.response.use(response => {
        return response.data;
      }, error => {
        if (error.response.status === 401) {
          // 处理未授权错误
        }
        return Promise.reject(error);
      });
      
  • 并发请求
    • Axios 支持并发请求,可以同时发送多个请求,并等待它们全部完成后进行处理。
    • 可以使用axios.allaxios.spread方法来处理并发请求的结果。
    • 例如:
      axios.all([
        axios.get('/api/users'),
        axios.get('/api/posts')
      ]).then(axios.spread((usersResponse, postsResponse) => {
        console.log(usersResponse.data);
        console.log(postsResponse.data);
      })).catch(error => {
        console.error(error);
      });
      
  • 可配置性
    • Axios 可以进行各种配置,如设置请求超时时间、设置基础 URL、设置请求头、设置响应数据格式等。
    • 例如:
      axios.defaults.baseURL = 'https://api.example.com';
      axios.defaults.timeout = 5000;
      axios.defaults.headers.common['Content-Type'] = 'application/json';
      
3)应用场景
  • 与后端 API 交互
    • 在前端应用中,使用 Axios 与后端服务器的 API 进行通信,获取数据、提交表单、更新资源等。
    • 例如,在一个电商网站中,使用 Axios 发送请求获取商品列表、添加购物车、下单等操作。
  • 前后端分离项目
    • 在前后端分离的架构中,Axios 作为前端与后端之间的通信桥梁,方便地进行数据交互和业务逻辑处理。
    • 前后端可以独立开发、测试和部署,提高开发效率和系统的可维护性。
  • 移动应用开发
    • 在移动应用开发中,Axios 可以用于与服务器进行通信,实现数据的同步和更新。
    • 例如,在一个移动社交应用中,使用 Axios 发送请求获取用户动态、发布状态、评论等操作。

7. ajax原理

AJAX(Asynchronous JavaScript and XML)即异步 JavaScript 和 XML,其工作原理如下:

1)基本概念
  • AJAX 不是一种新的编程语言,而是一种用于创建快速动态网页的技术。
  • 它通过在后台与服务器进行少量数据交换,实现网页的异步更新,而无需重新加载整个网页。
  • 这使得网页能够提供更流畅的用户体验,就像在使用桌面应用程序一样。
2)工作流程
  • 创建 XMLHttpRequest 对象
    • 在 JavaScript 中,首先创建一个 XMLHttpRequest 对象,它是 AJAX 的核心对象,用于在后台与服务器进行通信。
    • 不同浏览器对 XMLHttpRequest 对象的实现略有不同,但现代浏览器都提供了标准的 API。
    • 例如:
      var xhr = new XMLHttpRequest();
      
  • 配置请求
    • 设置请求的方法(GET、POST 等)、URL 和是否异步等参数。
    • 可以设置请求头信息,以便向服务器传递特定的信息。
    • 例如:
    xhr.open('GET', '/api/data', true);
    xhr.setRequestHeader('Content-Type', 'application/json');
    
  • 发送请求
    • 使用send()方法发送请求。如果是 POST 请求,可以在send()方法中传递请求参数。
    • 例如:
      xhr.send();
      
  • 监听状态变化
    • 通过监听 XMLHttpRequest 对象的onreadystatechange事件,来检测请求的状态变化。
    • 当请求的状态发生变化时,该事件会被触发。可以在事件处理函数中根据请求的状态进行相应的处理。
    • 例如:
      xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
          // 请求成功,处理响应数据
          var response = xhr.responseText;
          console.log(response);
        } else if (xhr.readyState === 4 && xhr.status!== 200) {
          // 请求失败,处理错误
          console.error('请求失败:' + xhr.status);
        }
      };
      
  • 服务器响应
    • 服务器接收到请求后,进行相应的处理,并返回响应数据。
    • 响应数据可以是 XML 格式、JSON 格式或纯文本等。
    • XMLHttpRequest 对象会根据响应的状态码和内容类型自动解析响应数据,并将其存储在responseTextresponseXML属性中。
  • 处理响应数据
    • 在客户端,根据响应数据的格式进行相应的处理。如果是 JSON 格式,可以使用JSON.parse()方法将其转换为 JavaScript 对象。
    • 可以根据响应数据更新网页的内容,或者执行其他操作。
    • 例如:
      var responseData = JSON.parse(xhr.responseText);
      document.getElementById('result').innerHTML = responseData.message;
      
3)优点
  • 异步通信
    • AJAX 允许网页在不刷新整个页面的情况下与服务器进行通信,从而提供更流畅的用户体验。
    • 用户可以继续与网页进行交互,而不会被长时间的等待所打断。
  • 局部更新
    • 可以只更新网页的一部分内容,而不是重新加载整个页面。这减少了网络流量和服务器负载,提高了性能。
  • 更好的用户体验
    • 通过异步通信和局部更新,用户可以更快地获得反馈,并且不会因为页面刷新而丢失当前的操作状态。
  • 与服务器进行交互
    • 可以在后台与服务器进行数据交换,实现动态内容的加载、表单提交、数据验证等功能。

你可能感兴趣的:(前端八股文面试题,前端,网络,websocket,web安全)