本文深入探讨了网络请求的基础概念、HTTP与HTTPS的区别、GET与POST请求的特性及使用场景,涵盖了常见的面试题及解答,旨在帮助读者全面理解网络请求面试题。
网络请求是指客户端(例如浏览器)向服务器发送请求,服务器处理请求并返回响应的过程。这种交互是许多Web应用的基础。网络请求分为客户端和服务器端两个部分,客户端向服务器发送请求,服务器处理请求后返回响应给客户端。
HTTP(超文本传输协议)是客户端和服务端之间通信的协议。其基本工作流程如下:
HTTP 请求和响应的示例如下:
请求示例:
GET /index.html HTTP/1.1 Host: example.com 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 Accept-Language: en-US,en;q=0.9
响应示例:
HTTP/1.1 200 OK Date: Tue, 07 Nov 2023 00:00:00 GMT Content-Type: text/html; charset=UTF-8 Content-Length: 1234 <html> <head> <title>Example Page</title> </head> <body> <h1>Welcome to Example Page!</h1> </body> </html>
HTTP状态码用于表示服务器对客户端请求的处理结果。常见状态码包括:
GET请求特点:
GET请求使用场景:
POST请求特点:
POST请求使用场景:
GET请求示例:
var xhr = new XMLHttpRequest(); xhr.open('GET', 'https://api.example.com/data'); xhr.onload = function() { if (xhr.status === 200) { console.log(xhr.responseText); } else { console.error('请求失败'); } }; xhr.send();
POST请求示例:
var xhr = new XMLHttpRequest(); xhr.open('POST', 'https://api.example.com/data', true); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.onload = function() { if (xhr.status === 200) { console.log(xhr.responseText); } else { console.error('请求失败'); } }; xhr.send('key1=value1&key2=value2');
GET请求示例:
fetch('https://api.example.com/data') .then(response => { if (response.ok) { return response.text(); } else { throw new Error('请求失败'); } }) .then(data => console.log(data)) .catch(error => console.error(error));
POST请求示例:
fetch('https://api.example.com/data', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ key1: 'value1', key2: 'value2' }) }) .then(response => { if (response.ok) { return response.text(); } else { throw new Error('请求失败'); } }) .then(data => console.log(data)) .catch(error => console.error(error));
GET请求示例:
axios.get('https://api.example.com/data') .then(response => { console.log(response.data); }) .catch(error => { console.error(error); });
POST请求示例:
axios.post('https://api.example.com/data', { key1: 'value1', key2: 'value2' }) .then(response => { console.log(response.data); }) .catch(error => { console.error(error); });
懒加载示例:
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA..." data-class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://example.com/image.png" alt="Image" loading="lazy">
预加载示例:
<link rel="preload" href="https://example.com/style.css" as="style" onload="this.rel='stylesheet'"> <link rel="preload" href="https://example.com/main.js" as="script">
合并资源示例:
<link rel="stylesheet" href="/css/main.min.css"> <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="/js/main.min.js"></script>
CDN(内容分发网络)是一种将内容存储在网络边缘的服务器上,使用户能够更快地访问内容的技术。通过将资源存储在全球多个节点上,CDN可以有效减少服务器端请求次数和延迟。
CDN配置示例:
<link rel="stylesheet" href="https://cdn.example.com/css/main.min.css"> <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.example.com/js/main.min.js"></script>
缓存头设置示例:
Cache-Control: max-age=3600, public Expires: Thu, 07 Jan 2024 00:00:00 GMT
HTTP:超文本传输协议,主要用于客户端和服务端之间的数据传输。它是默认不加密的,传输数据是明文。
HTTPS:安全超文本传输协议,基于SSL/TLS协议提供了安全的数据传输。HTTPS的通信过程都在加密的情况下进行,因此更加安全。
HTTP与HTTPS的区别示例:
# HTTP请求 GET /index.html HTTP/1.1 Host: example.com # HTTPS请求 GET /index.html HTTP/1.1 Host: example.com Upgrade-Insecure-Requests: 1
跨域请求指的是在一个域名下的客户端试图请求另一个域名下的资源。跨域请求由于安全限制(同源策略),默认情况下不允许执行。
同源策略是一种安全策略,用于限制一个源(域名、协议和端口)的文档或者脚本如何与另一个源的资源进行交互。这里源的定义是域名、协议和端口的组合。
解决跨域请求的方法包括:
JSONP示例:
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://api.example.com/data?callback=handleData"></script> function handleData(data) { console.log(data); }
CORS配置示例:
Access-Control-Allow-Origin: * Access-Control-Allow-Methods: GET, POST, PUT, DELETE Access-Control-Allow-Headers: Content-Type, Authorization
代理服务器配置示例:
const express = require('express'); const axios = require('axios'); const app = express(); app.use('/api', (req, res) => { axios({ method: 'GET', url: 'https://api.example.com/data', headers: { 'Content-Type': 'application/json' } }) .then(response => { res.send(response.data); }) .catch(error => { res.status(500).send(error); }); }); app.listen(3000, () => { console.log('代理服务器启动'); });
CDN(内容分发网络)是一种将内容存储在网络边缘的服务器上,使用户能够更快地访问内容的技术。通过将资源存储在全球多个节点上,CDN可以有效减少服务器端请求次数和延迟。
通过以上内容,你将能够全面理解和掌握网络请求的基础知识和高级技巧,为面试做好充分准备。