服务器是怎么处理请求的
引入
前端代码通常运行在浏览器里,但页面展示的数据、用户登录状态和提交结果,很多都不在浏览器本地。浏览器把请求发给服务器,服务器处理后再返回响应。
如果只把服务器理解成“放网页文件的电脑”,就很难解释接口为什么会返回不同结果,也很难排查 404、500、跨域和慢请求。理解服务器的职责,才能把“页面出了问题”进一步拆成请求、处理和响应三个环节。
正文
定义
服务器(Server)是向其他设备或程序提供资源、数据或服务的计算机及其运行的软件。发起请求的一方通常叫客户端(Client),浏览器就是前端最常见的客户端。
客户端和服务器的分工
服务器不一定是一台独立的实体机器。云服务器、虚拟机和容器都可以运行服务器程序。这里需要区分硬件角色和软件角色:
| 角色 | 主要工作 | 前端看到的表现 |
|---|---|---|
| 客户端 | 发起请求、接收响应、展示界面 | 浏览器、移动端 App |
| Web 服务器 | 接收 HTTP 请求,返回静态文件或转发请求 | HTML、CSS、JS、图片 |
| 应用服务器 | 执行业务逻辑,处理参数和权限 | 接口返回 JSON |
| 数据库服务器 | 保存和查询结构化数据 | 用户、商品、订单等数据 |
实际项目中,这些角色可能部署在不同机器上,也可能暂时运行在同一台机器上。服务器是一个职责概念,不等于某一种硬件。
一次请求的基本流程
以页面请求一个用户列表接口为例:
浏览器发起 HTTP 请求
↓
DNS 找到服务器 IP(见 [[DNS]])
↓
服务器接收请求
↓
检查路由、请求方法、参数和身份
↓
执行业务逻辑,必要时查询数据库或其他服务
↓
生成响应:状态码、响应头、响应体
↓
浏览器读取响应并更新页面(见 [[JS 网络请求]])请求通常包含这些信息:
- URL:说明要访问的资源位置。
- 方法:说明操作意图,例如
GET获取数据,POST提交数据。 - 请求头:携带内容类型、认证信息、缓存信息等元数据。
- 请求体:提交给服务器的数据,常见格式是 JSON 或表单数据。
响应通常包含:
- 状态码:说明请求在 HTTP 层面的处理结果,详见 状态码。
- 响应头:说明内容类型、缓存策略、跨域策略等。
- 响应体:服务器返回的 HTML、JSON、图片或其他资源。
静态资源和动态数据
服务器返回的内容大致可以分为两类:
| 类型 | 处理方式 | 例子 |
|---|---|---|
| 静态资源 | 读取已经存在的文件并返回 | HTML、CSS、JS、图片 |
| 动态数据 | 根据请求参数和当前数据实时生成 | 用户信息、搜索结果、订单状态 |
访问一个前端打包后的 index.html,服务器可能只是读取文件;请求 /api/users 时,应用服务器则需要验证身份、查询数据库,再组装 JSON 响应。
这也是“刷新页面”和“调用接口”的区别之一:前者常常是在请求页面资源,后者是在请求服务器提供的数据服务。两者都使用网络请求,但处理逻辑不一定相同。
服务器如何影响前端
前端排查问题时,不要只看页面表现,可以按状态码、请求链路定位:
- 请求没有发出:优先检查事件绑定、请求地址和浏览器代码。
- 返回 4xx:通常检查 URL、请求方法、参数、登录状态和权限。
- 返回 5xx:服务器或上游服务处理失败,需要保留请求参数、时间和响应信息交给后端排查。
- 响应很慢:在网络面板中区分 DNS、连接、等待服务器响应和下载响应体的耗时。
- 浏览器拦截跨域请求:服务器需要返回正确的 CORS 响应头,或者由开发服务器配置代理。
另外,服务器返回 200 只代表 HTTP 请求成功到达并得到正常响应,不代表业务一定成功。接口响应体中可能仍然包含业务错误码,前端需要分别处理 HTTP 状态和业务状态。
本地开发中的服务器
开发时运行 npm run dev 或类似命令,通常会启动一个本地开发服务器。它可能负责:
- 提供前端静态资源。
- 监听文件变化并自动刷新页面。
- 把
/api请求代理到后端服务器。 - 在开发环境中处理模块热更新和资源转换。
因此,“本地项目能打开”不一定表示真正的后端接口也正常。前端开发服务器、后端应用服务器和数据库可能是三个不同的进程。
引出
服务器解决的是“收到请求后提供资源或服务”的问题。继续往下可以分别理解 HTTP缓存 如何减少服务器压力,Web 服务器和应用服务器如何部署,反向代理与 CDN 如何改变请求链路,以及服务器如何通过认证、权限和 CORS 控制访问范围。