前端必知必会：HTTP 状态码速查指南

目录一、状态码是干什么的二、五大类状态码速览三、高频状态码详解前端必背 2xx成功类200 OK —— 一切正常201 Created —— 创建成功204 No Content —— 成功但无内容 3xx重定向类301 Moved Permanently —— 永久重定向⚠️ 要小心302 Found —— 临时重定向304 Not Modified —— 未修改⭐ 面试必问❌ 4xx客户端错误类前端背锅400 Bad Request —— 请求参数错误401 Unauthorized —— 未认证403 Forbidden —— 禁止访问404 Not Found —— 资源不存在 5xx服务端错误类后端背锅500 Internal Server Error —— 服务器内部错误502 Bad Gateway —— 网关错误504 Gateway Timeout —— 网关超时四、面试高频“对比题”301 vs 302401 vs 403304 vs 200五、前端实战响应拦截器统一处理代码模板六、速记口诀收藏背诵写在最后一、状态码是干什么的当浏览器向服务器发送请求后服务器会返回一个三位数字告诉浏览器这次请求的结果如何。我们可以用取快递来类比2xx成功快递顺利送到签收成功。3xx重定向快递员告诉你“地址换了去隔壁取。”4xx客户端错误你填错了地址或没带身份证快递没法给你。5xx服务端错误快递仓库爆仓或机器故障快递出不来。二、五大类状态码速览分类范围含义一句话版1xx信息100 - 199请求已收到继续处理2xx成功200 - 299请求成功返回了你要的数据3xx重定向300 - 399资源位置变了去别处找4xx客户端错误400 - 499请求有问题是前端/用户的问题5xx服务端错误500 - 599服务器出问题了是后端/运维的问题记忆口诀1 等、2 好、3 跑、4 错、5 倒三、高频状态码详解前端必背 2xx成功类200 OK —— 一切正常请求成功服务器返回了请求的数据HTML、JSON、图片等。场景页面加载成功、接口正常返回数据。201 Created —— 创建成功常见于POST请求注册、新增文章、上传文件服务器不仅处理了请求还新建了资源。场景用户注册成功、发布文章成功。204 No Content —— 成功但无内容服务器处理成功了但响应体是空的。场景删除操作DELETE请求、更新操作PUT请求只告诉前端“搞定了”不需要返回数据。 3xx重定向类301 Moved Permanently —— 永久重定向⚠️ 要小心“这个地址永久搬家了以后都去新地址。”浏览器会缓存这个新地址下次自动跳转不再访问旧地址。场景域名更换http://oldsite.com→https://newsite.com不推荐用于临时活动页因为浏览器会永久记住换活动就麻烦了⚠️面试陷阱301 会被浏览器强缓存一旦配置错误比如把临时跳转配成 301用户可能永远无法访问旧链接清除缓存都未必有用。302 Found —— 临时重定向“这次先借隔壁的下次还来老地址。”浏览器不会缓存新地址每次都会先访问旧地址再跳转。场景未登录用户跳转到登录页临时活动页跳转支付成功后跳转到订单页304 Not Modified —— 未修改⭐ 面试必问“你手里的版本和服务器一样用你本地缓存的就行。”它不是错误而是协商缓存生效的标志。服务器只返回了响应头很小没有返回实际的资源文件省流量。场景刷新页面时JS/CSS/图片等静态资源未变化。⚠️常见误区看到 304 不要慌这说明浏览器的缓存策略配置生效是性能优化的体现。❌ 4xx客户端错误类前端背锅400 Bad Request —— 请求参数错误“你发的请求格式不对我听不懂。”常见原因前端传的 JSON 格式错了多了逗号、少了引号必填字段没传参数类型不对接口要 number你传了 string排查思路打开浏览器开发者工具的Network面板查看请求的 Payload负载和后端确认接口文档。401 Unauthorized —— 未认证“你没带身份证我不认识你。”含义用户未登录或Token 过期/无效。处理方式前端在 Axios 响应拦截器中捕获 401清除本地 Token跳转到登录页。// axios 响应拦截器示例 if (response.status 401) { localStorage.removeItem(token); router.push(/login); }⚠️401 vs 403 区别401没登录 / Token 无效身份认证失败403登录了但没权限权限认证失败403 Forbidden —— 禁止访问“你有身份证但不是这个小区的住户不让进。”含义用户已登录但没有权限访问这个资源。场景普通用户访问管理员后台免费用户访问付费内容IP 被服务器拉黑处理方式跳转到 403 提示页或提示“暂无权限”。404 Not Found —— 资源不存在“你给的地址找不到这间房。”含义服务器上没有这个资源。常见原因URL 路径拼写错误注意大小写资源已被删除后端没有注册该路由忘了写接口排查思路检查请求 URL 是否正确确认后端是否已部署该接口。 5xx服务端错误类后端背锅500 Internal Server Error —— 服务器内部错误“后台代码报错了崩了。”常见原因后端代码抛出异常如空指针、数据库连接失败服务器配置错误处理方式前端只能提示“系统繁忙请稍后重试”需要后端查看日志排查。502 Bad Gateway —— 网关错误“快递分拣中心联系不上配送站。”含义网关如 Nginx无法从后端服务如 Java/Go 服务获取有效响应。常见原因后端服务挂了进程崩溃后端服务拒绝连接端口没开防火墙拦截504 Gateway Timeout —— 网关超时“配送站 30 秒没回话分拣中心不等了。”含义后端服务处理请求太慢超过了 Nginx 设定的超时时间。常见原因数据库慢查询SQL 没走索引后端代码死循环或死锁第三方接口响应慢处理方式优化后端接口性能或调整 Nginx 超时配置治标不治本。四、面试高频“对比题”301 vs 302对比项301永久重定向302临时重定向缓存行为被浏览器强缓存不会被缓存适用场景域名永久迁移、HTTP → HTTPS未登录跳转、临时活动风险配错了用户很难恢复每次都去问性能略差401 vs 403对比项401 Unauthorized403 Forbidden核心问题你是谁身份认证失败你配吗权限认证失败常见原因未登录、Token 过期角色权限不够、IP 被封解决方案重新登录获取 Token联系管理员开通权限304 vs 200对比项200 OK304 Not Modified返回内容返回完整的资源文件只返回响应头无响应体触发时机资源已更新资源未变化协商缓存生效性能影响消耗带宽省流量、速度快五、前端实战响应拦截器统一处理代码模板在实际项目中我们通常会在 Axios 的响应拦截器中统一处理各种状态码/** * utils/request.js * * 基于 axios 封装的统一网络请求模块 * * 核心功能 * 1. 创建统一的 axios 实例配置基础路径和超时时间 * 2. 通过响应拦截器统一处理接口返回的状态码 * 3. 根据不同的 HTTP 状态码自动执行对应的错误提示和页面跳转 * * 使用方式 * import request from /utils/request; * const data await request.get(/user/info); */ import axios from axios; import { ElMessage } from element-plus; import router from /router; /** * 创建 axios 实例 * * 为什么要创建独立实例 * - 避免污染 axios 的全局默认配置 * - 可以针对当前项目设置专属的 baseURL 和超时时间 */ const instance axios.create({ baseURL: /api, // 所有请求自动拼接该前缀实际开发中可通过环境变量配置 timeout: 10000, // 请求超时时间单位毫秒10秒后无响应则自动终止请求 }); /** * 响应拦截器 * * 作用在接口响应被 .then / .catch 处理之前统一拦截并做预处理 * * 为什么需要它 * - 避免在每个接口调用处重复写状态码判断和错误提示 * - 统一处理登录过期、权限不足等全局逻辑 * * 拦截器分两个回调 * - 第一个处理正常响应HTTP 状态码为 2xx * - 第二个处理异常响应HTTP 状态码非 2xx如 400、401、500 等 */ instance.interceptors.response.use( /** * 正常响应处理 * 当 HTTP 状态码为 200/201/204 等 2xx 时进入此函数 * * 注意这里只返回 response.data即后端返回的业务数据 * 而不是整个 response 对象这样调用方直接拿到业务数据无需再解构 */ (response) { // 假设后端统一返回格式为 { code: 0, data: {...}, message: } // 如果业务 code 不为 0也可以在这里统一处理业务错误码 // 但本例中我们专注于 HTTP 状态码的处理业务码交给具体业务层判断 return response.data; }, /** * 异常响应处理 * 当 HTTP 状态码为 4xx客户端错误或 5xx服务端错误时进入此函数 * * error 对象包含请求和响应的完整信息其中最常用的是 error.response * 如果网络完全断开error.response 可能为 undefined需要做兜底处理 */ (error) { // 【安全取值】如果 error.response 不存在如网络断开用空对象兜底避免解构报错 const { status } error.response || {}; // 【根据 HTTP 状态码分别处理】 switch (status) { // ---------- 4xx客户端错误通常是前端或用户的问题 ---------- case 400: // 场景请求参数格式错误、必填字段缺失、参数类型不匹配 ElMessage.error(请求参数有误请检查后重试); // 不跳转页面只提示让用户自行修正 break; case 401: // 场景用户未登录或登录凭证Token已过期 / 无效 // // 处理流程三步走 // 1. 清除本地存储中失效的 Token避免带着旧 Token 继续请求 // 2. 弹出提示告知用户需要重新登录 // 3. 跳转到登录页让用户重新获取有效 Token localStorage.removeItem(token); ElMessage.warning(登录已过期请重新登录); router.push(/login); break; case 403: // 场景用户已登录但当前账号没有访问该资源的权限 // 例如普通用户试图访问管理员后台或免费用户访问付费内容 ElMessage.error(您没有权限访问该资源); router.push(/403); // 跳转到无权限提示页 break; case 404: // 场景请求的 URL 在服务器上不存在 // 常见原因接口路径拼写错误、后端尚未部署该接口、资源已被物理删除 ElMessage.error(请求的资源不存在); // 注意404 通常不跳转因为大概率是代码 Bug跳转反而掩盖了问题 break; // ---------- 5xx服务端错误通常是后端或运维的问题 ---------- case 500: // 场景服务器内部发生了未捕获的异常如 Java 空指针、数据库连接失败 // 这是最通用的服务端错误具体原因需要后端查看日志定位 ElMessage.error(服务器开小差了请稍后重试); break; case 502: case 504: // 502 Bad Gateway网关如 Nginx无法从后端服务获取有效响应 // 常见原因后端服务进程挂了、端口未开放、防火墙拦截 // 504 Gateway Timeout网关等待后端响应超时超过了 Nginx 配置的超时时间 // 常见原因后端接口执行时间过长慢 SQL、死循环、第三方接口卡顿 ElMessage.error(网络超时请检查网络连接); break; // ---------- 兜底处理未覆盖到的状态码 ---------- default: // 出现未预料的状态码时给出通用提示同时将错误继续抛出 // 这样业务层还可以针对特殊情况进行二次处理 ElMessage.error(网络异常请稍后重试); break; } /** * 返回一个 rejected 状态的 Promise * * 为什么需要这行 * - 让调用方能够通过 .catch() 捕获到这个错误做额外的业务处理 * - 如果这里不 return Promise.reject(error)调用方将无法感知请求失败了 * * 举例 * try { * await request.get(/api/list); * } catch (err) { * // 这里能捕获到 error因为拦截器返回了 reject * console.log(请求彻底失败了, err); * } */ return Promise.reject(error); } ); export default instance;六、速记口诀收藏背诵1 打头继续等2 打头算成功3 打头去别处4 打头自己崩5 打头服务器崩。高频必背200 好201 造304 读缓存301 永久搬302 临时转400 传错参401 没登录403 门禁拦404 找不见500 后端瘫504 等得烦。写在最后状态码是前后端沟通的“通用语言”记住它们不仅能帮你快速定位问题还能在面试中对答如流。建议收藏本文遇到接口报错时拿出来对照排查比盲目瞎改高效十倍PS本文由deepseek辅助生成