当前位置： 首页 > news >正文

HTTP请求全链路剖析：请求头、XHR与状态码的实战指南

news 2025/11/1 21:58:46

目录

一、HTTP/HTTPS 请求头（Request Headers）

二、HTTP/HTTPS 响应头（Response Headers）

三、完整案例

1. 客户端请求示例（GET 请求）

2. 服务端响应示例

四、注意事项

 五、常见的 Content-Type 值及其使用场景

 Content-Type 关键场景总结

表单提交：

API 交互：

静态资源：

文件传输：

多媒体内容：

 Content-Type 示例代码

1. 提交 JSON 数据（API 请求）

2. 文件上传（表单）

3. 返回 HTML 页面

 Content-Type 注意事项

六、XMLHttpRequest 四部曲

1. 创建 XMLHttpRequest 对象

2. 初始化请求配置

3. 设置回调函数（监听状态变化）

4. 发送请求

  XMLHttpRequest完整代码示例

XMLHttpRequest扩展说明

1.异步 vs 同步

2.设置请求头:

3.处理其他事件

3.1上传进度：

3.2超时处理：

4.兼容现代 AP:I

七、HTTP 状态码分类表

HTTP 状态码关键注意事项

常用状态码优先级：

重定向行为差异：

特殊状态码用途：

实际开发建议：

 

以下是 HTTP/HTTPS 请求和响应中常见的请求头、响应头及其含义，以及一个完整案例：

一、HTTP/HTTPS 请求头（Request Headers）

请求头名称含义
Host请求的目标域名和端口（HTTP/1.1 必需字段）。
User-Agent客户端的浏览器、操作系统等信息。
Accept客户端可接受的内容类型（如 text/html, application/json）。
Accept-Encoding客户端支持的压缩编码（如 gzip, deflate）。
Accept-Language客户端优先语言（如 en-US, zh-CN）。
Connection控制连接是否保持活动（如 keep-alive 或 close）。
Content-Type请求体的媒体类型（如 application/json, application/x-www-form-urlencoded）。
Content-Length请求体的字节长度。
Authorization身份验证凭证（如 Bearer <token> 或 Basic <credentials>）。
Cookie客户端携带的 Cookie 信息。
Referer当前请求的来源页面 URL。
Cache-Control缓存策略（如 no-cache, max-age=3600）。
Origin请求的源域名（用于 CORS 跨域请求）。

二、HTTP/HTTPS 响应头（Response Headers）

响应头名称含义
Content-Type响应体的媒体类型（如 text/html, application/json）。
Content-Encoding响应体的压缩编码（如 gzip）。
Content-Length响应体的字节长度。
Cache-Control缓存策略（如 public, max-age=3600）。
Set-Cookie服务器向客户端设置 Cookie。
Server服务器软件名称（如 Apache/2.4.1）。
Date响应生成的日期和时间。
Location重定向目标 URL（状态码为 3xx 时使用）。
Access-Control-Allow-Origin允许跨域请求的源域名（CORS 相关）。
ETag资源的唯一标识符（用于缓存验证）。
Expires响应过期时间。
Status响应状态码（如 200 OK, 404 Not Found）。

三、完整案例

1. 客户端请求示例（GET 请求）

GET /api/data HTTP/1.1
Host: example.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.212 Safari/537.36
Accept: application/json
Accept-Language: en-US,en;q=0.9
Accept-Encoding: gzip, deflate
Connection: keep-alive
Authorization: Bearer abc123xyz
Cookie: session_id=abc123;

2. 服务端响应示例

HTTP/1.1 200 OK
Content-Type: application/json; charset=utf-8
Content-Length: 85
Content-Encoding: gzip
Cache-Control: max-age=3600
Date: Mon, 01 Jan 2024 12:00:00 GMT
Server: Apache/2.4.1
Set-Cookie: session_id=abc123; Path=/; HttpOnly{"data": "Hello World","status": "success"
}

四、注意事项

  1. 非标准头部：可能存在以 X- 开头的自定义头部（如 X-Requested-With）。

  2. 安全性：HTTPS 在传输层加密，但头部字段与 HTTP 完全一致。

  3. 动态性：实际请求/响应头可能因框架、服务器配置不同而变化（如 X-Powered-By）。

 五、常见的 Content-Type 值

Content-Type 值使用场景示例
text/plain纯文本数据，无格式。普通文本文件（.txt）
text/htmlHTML 网页内容。网页渲染（.html）
text/cssCSS 样式表文件。网页样式（.css）
text/javascript
（推荐 application/javascript）		JavaScript 代码。网页脚本（.js）
application/jsonJSON 格式数据，常用于 API 请求或响应。{"name": "John", "age": 30}
application/xmlXML 格式数据。<user><name>John</name><age>30</age></user>
application/x-www-form-urlencoded表单提交（键值对 URL 编码）。name=John&age=30
multipart/form-data表单包含文件上传（支持二进制数据）。文件上传（如 <input type="file">）
application/octet-stream二进制流数据（如文件下载）。下载任意二进制文件（如 .zip, .exe）
image/jpegJPEG 格式图片。.jpg 或 .jpeg 文件
image/pngPNG 格式图片。.png 文件
image/gifGIF 格式图片。.gif 文件
application/pdfPDF 文档。.pdf 文件
application/zipZIP 压缩文件。.zip 文件
audio/mpegMP3 音频文件。.mp3 文件
video/mp4MP4 视频文件。.mp4 文件
application/gzipGZIP 压缩文件。.gz 文件
application/vnd.ms-excelExcel 文件（旧格式）。.xls 文件
application/vnd.openxmlformats-officedocument.spreadsheetml.sheetExcel 文件（新格式，Office 2007+）。.xlsx 文件
application/grpcgRPC 协议通信（需配合 proto 文件）。微服务间通信
application/xhtml+xmlXHTML 格式网页。符合 XML 规范的 HTML（.xhtml）
application/ld+jsonJSON-LD 格式（语义网数据）。结构化数据（如 SEO 优化）

 Content-Type 关键场景总结

  1. 表单提交：

    • 普通表单：application/x-www-form-urlencoded

    • 文件上传：multipart/form-data

  2. API 交互：

    • 数据交换：application/json

    • 传统 XML 接口：application/xml

  3. 静态资源：

    • 图片：image/*

    • 样式和脚本：text/css, text/javascript

  4. 文件传输：

    • 二进制文件：application/octet-stream

    • 压缩文件：application/zip, application/gzip

  5. 多媒体内容：

    • 音视频：audio/*, video/*

 Content-Type 示例代码

1. 提交 JSON 数据（API 请求）

POST /api/users HTTP/1.1
Host: example.com
Content-Type: application/json
Content-Length: 27{"name": "John", "age": 30}

2. 文件上传（表单）

POST /upload HTTP/1.1
Host: example.com
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryABC123------WebKitFormBoundaryABC123
Content-Disposition: form-data; name="file"; filename="photo.jpg"
Content-Type: image/jpeg<二进制数据>
------WebKitFormBoundaryABC123--

3. 返回 HTML 页面

HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8
Content-Length: 85<!DOCTYPE html>
<html><body><h1>Hello World</h1></body></html>

 Content-Type 注意事项

  1. 字符集（charset）：如 text/html; charset=UTF-8，用于指定编码格式。

  2. 兼容性：部分旧系统可能不支持新格式（如 .xlsx 需特定 MIME 类型）。

  3. 严格校验：错误的 Content-Type 可能导致客户端解析失败（如 JSON 误设为 text/plain

六、XMLHttpRequest 四部曲

1. 创建 XMLHttpRequest 对象

const xhr = new XMLHttpRequest();

  • 作用：初始化一个 XMLHttpRequest 实例，用于发起 HTTP 请求。

  • 兼容性处理（针对 IE6 及以下）：

    let xhr;
if (window.XMLHttpRequest) {xhr = new XMLHttpRequest(); // 现代浏览器
} else {xhr = new ActiveXObject("Microsoft.XMLHTTP"); // IE6
}

2. 初始化请求配置

xhr.open(method, url, async);

  • 参数：

    • method：请求方法（GET, POST, PUT, DELETE 等）。

    • url：请求的目标地址。

    • async：是否异步（默认为 true）。

  • 示例：

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

3. 设置回调函数（监听状态变化）

xhr.onreadystatechange = function() {if (xhr.readyState === 4) { // 请求完成if (xhr.status === 200) { // 成功响应console.log(xhr.responseText);} else {console.error('请求失败:', xhr.status);}}
};

  • 关键属性：

    • readyState：请求状态（0-未初始化，1-已打开，2-已发送，3-接收中，4-完成）。

    • status：HTTP 状态码（如 200 成功，404 未找到）。

    • responseText：响应内容（字符串格式）。

4. 发送请求

xhr.send(body);

  • 作用：正式发送 HTTP 请求。

  • 参数：

    • body：请求体数据（GET 请求通常为 null，POST 可为 FormData 或字符串）。

  • 示例：

    // GET 请求（无请求体）
xhr.send();// POST 请求（发送 JSON 数据）
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({ name: "John" }));

  XMLHttpRequest完整代码示例

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);xhr.onreadystatechange = function() {if (xhr.readyState === 4) {if (xhr.status === 200) {console.log('响应数据:', xhr.responseText);} else {console.error('请求失败，状态码:', xhr.status);}}
};xhr.send();

XMLHttpRequest扩展说明

1.异步 vs 同步

  • async 参数为 true（默认）时，请求在后台执行，不阻塞页面。

  • 若设为 false，请求会阻塞页面直到完成（已废弃，不推荐使用）。

2.设置请求头:

在 open() 之后、send() 之前设置：

xhr.setRequestHeader('Content-Type', 'application/json');

3.处理其他事件

3.1上传进度：

xhr.upload.onprogress = (e) => {console.log(`上传进度: ${(e.loaded / e.total) * 100}%`);
};

3.2超时处理：

xhr.timeout = 5000; // 5秒超时
xhr.ontimeout = () => {console.error('请求超时');
};

4.兼容现代 AP:I

推荐优先使用 Fetch API（更简洁的语法）

fetch('https://api.example.com/data').then(response => response.json()).then(data => console.log(data));

七、HTTP 状态码分类表

分类状态码名称描述常见场景
信息响应100Continue客户端应继续发送请求体。大文件上传前确认服务器是否接受。
(1xx)101Switching Protocols服务器同意切换协议（如升级到 WebSocket）。协议升级请求。
 102Processing服务器已收到请求，但处理尚未完成。WebDAV 异步操作中返回中间状态。
 103Early Hints预加载资源提示。服务器提前返回部分响应头，提示客户端预加载资源。
成功响应200OK请求成功完成。标准成功响应（GET/POST/PUT/DELETE）。
(2xx)201Created资源已创建（常见于 POST/PUT）。提交表单后返回新资源的 URL。
 202Accepted请求已接受但未处理完成。异步任务（如后台数据处理）。
 203Non-Authoritative Info响应头信息来自缓存或第三方。代理服务器修改了原始响应头。
 204No Content请求成功，但无响应体。删除资源成功或提交无返回值的操作。
 205Reset Content请求成功后需重置表单。表单提交后清空输入框。
 206Partial Content返回部分内容（支持分片下载）。断点续传或大文件分片下载。
 207Multi-Status多个状态码（WebDAV 多操作响应）。批量操作中部分成功、部分失败。
 208Already Reported重复的 WebDAV 成员状态已省略。避免重复返回相同集合成员的状态。
 226IM Used服务器已完成对实例的修改（HTTP Delta 编码）。增量更新资源时使用。
重定向300Multiple Choices请求资源有多个可选响应。返回不同格式的资源列表（如不同语言页面）。
(3xx)301Moved Permanently资源永久重定向到新 URL。网站改版后旧链接永久跳转。
 302Found资源临时重定向到新 URL。临时维护页面跳转。
 303See Other重定向到其他资源（强制 GET 请求）。POST 提交后重定向到结果页。
 304Not Modified资源未修改（客户端缓存有效）。缓存协商（If-Modified-Since 生效）。
 305Use Proxy必须通过代理访问资源（已废弃）。早期代理服务器场景。
 307Temporary Redirect临时重定向且保持原请求方法。临时维护时保持 POST 方法跳转。
 308Permanent Redirect永久重定向且保持原请求方法。API 版本迁移后永久保持方法跳转。
客户端错误400Bad Request请求语法错误或参数无效。缺少必填参数或 JSON 格式错误。
(4xx)401Unauthorized未提供有效身份凭证。未登录访问需认证的接口。
 402Payment Required需付费完成请求（保留状态码）。在线支付或订阅场景。
 403Forbidden无权限访问资源。用户角色权限不足。
 404Not Found资源不存在。URL 路径错误或资源已删除。
 405Method Not Allowed请求方法不被允许。用 GET 访问仅支持 POST 的接口。
 406Not Acceptable服务器无法提供客户端接受的响应格式。请求头 Accept 指定了不支持的 MIME 类型。
 407Proxy Auth Required需代理服务器认证。代理服务器要求身份验证。
 408Request Timeout请求超时。服务器等待客户端发送请求时间过长。
 409Conflict请求与资源当前状态冲突。文件版本冲突或重复创建资源。
 410Gone资源已永久删除。已下架的商品或页面。
 411Length Required请求头缺少 Content-Length。上传文件未指定内容长度。
 412Precondition Failed请求头中的先决条件失败。If-Match 或 If-Unmodified-Since 校验失败。
 413Payload Too Large请求体过大。上传文件超过服务器限制。
 414URI Too LongURL 过长。GET 请求参数过多导致 URL 超出限制。
 415Unsupported Media Type不支持的媒体类型。上传文件格式不被支持（如非图片文件）。
 416Range Not Satisfiable请求范围不满足资源范围。分片下载时指定范围超出文件大小。
 417Expectation Failed请求头 Expect 预期不符。服务器不支持 Expect: 100-continue。
 418I'm a Teapot彩蛋状态码（源自愚人节玩笑）。无实际用途，用于幽默响应。
 421Misdirected Request请求被发送到错误的服务器。服务器无法生成响应（如配置错误的负载均衡）。
 422Unprocessable Entity请求格式正确但语义错误（WebDAV）。验证失败（如邮箱格式错误）。
 423Locked资源被锁定（WebDAV）。编辑已被其他用户锁定的文件。
 424Failed Dependency因前一个请求失败导致当前请求失败（WebDAV）。批量操作中某一步骤失败。
 425Too Early服务器拒绝处理可能重放的请求。防范重放攻击。
 426Upgrade Required需升级协议（如从 HTTP 到 HTTPS）。强制客户端使用更安全的协议。
 428Precondition Required请求需包含条件头（如 If-Match）。防止更新丢失（类似乐观锁）。
 429Too Many Requests请求过于频繁。API 限流或防止暴力破解。
 431Request Header Fields Too Large请求头过大。请求头（如 Cookie）超出服务器限制。
 451Unavailable For Legal Reasons因法律原因不可访问。政府要求下架的非法内容。
服务器错误500Internal Server Error服务器内部错误。代码异常或未捕获的错误。
(5xx)501Not Implemented服务器不支持请求的功能。请求了未实现的 HTTP 方法。
 502Bad Gateway网关或代理服务器收到无效响应。后端服务宕机或配置错误。
 503Service Unavailable服务不可用（临时过载或维护）。服务器维护或流量激增。
 504Gateway Timeout网关或代理服务器超时。后端服务响应超时。
 505HTTP Version Not Supported服务器不支持请求的 HTTP 版本。使用 HTTP/3 请求仅支持 HTTP/1.1 的服务器。
 506Variant Also Negotiates内容协商循环（服务器配置错误）。多语言版本协商失败。
 507Insufficient Storage服务器存储空间不足（WebDAV）。上传文件时磁盘已满。
 508Loop Detected服务器检测到无限循环（WebDAV）。文件同步时出现循环依赖。
 510Not Extended请求需扩展才能完成。服务器要求客户端发送扩展头。
 511Network Authentication Required需网络认证（如公共 Wi-Fi 登录页面）。连接公共网络时弹出认证页面。

HTTP 状态码关键注意事项

  1. 常用状态码优先级：

    • 客户端错误优先检查 4xx（如 400, 401, 403, 404, 429）。

    • 服务器错误优先检查 5xx（如 500, 502, 503）。

  2. 重定向行为差异：

    • 301 和 308 是永久重定向，浏览器会缓存。

    • 302、303、307 是临时重定向，不缓存。

  3. 特殊状态码用途：

    • 204 No Content：适用于无需返回数据的操作（如 DELETE）。

    • 206 Partial Content：用于断点续传或流媒体。

    • 429 Too Many Requests：API 限流标准响应。

  4. 实际开发建议：

    • 优先使用标准状态码，避免自定义非标准码（如 4xx 替代 200 包裹错误信息）。

    • 调试时结合响应头和日志分析具体原因（如 500 可能是代码异常或数据库连接失败）。

 

http://www.dtcms.com/a/212184.html

相关文章：

  • 8.Java 8 日期时间处理：从 Date 的崩溃到 LocalDate 的优雅自救​
  • ADS学习笔记(二) 交流小信号仿真
  • 2025最新智能优化算法：野燕麦优化算法（Animated Oat Optimization Algorithm, AOO），MATLAB代码
  • HTTP协议版本的发展（HTTP/0.9、1.0、1.1、2、3）
  • 黑马点评-分布式锁Lua脚本
  • 进阶-自定义类型(结构体、位段、枚举、联合）
  • Lua基础语法
  • 在Windows平台基于VSCode准备GO的编译环境
  • Mustache 模板引擎详解_轻量、跨语言、逻辑无关的设计哲学
  • 一文讲透golang channel 的特点、原理及使用场景
  • 正则表达式：字符串模式匹配的利器
  • 历年华南理工大学保研上机真题
  • 什么是前端工程化？它有什么意义
  • 并发编程(6)
  • linux学习第15天（dup和dup2）
  • GO 语言进阶之 进程 OS与 编码，数据格式转换
  • Docker（零）：本文为 “Docker系列” 有关博文的简介和目录
  • 二叉树--oj1
  • 计算机基础核心课程
  • 详解Mysql redo log与binlog的两阶段提交（2PC）
  • 2025年AI代理演进全景：从技术成熟度曲线到产业重构
  • 加密货币投资亏损后，能否以“欺诈”或“不当销售”索赔？
  • 【JAVA】线程创建方式：继承Thread vs 实现Runnable（32）
  • LeetCode-图论-岛屿数量+腐烂的橘子
  • 【linux】mount命令中，data=writeback参数详细介绍
  • 分布式缓存：CAP 理论在实践中的误区与思考
  • 如何使用HiveSQL实现2个字符串间的映射及排序
  • 9. Spring AI 各版本的详细功能与发布时间整理
  • 平流层通信系统的深度论述：其技术成熟将推动通信范式从“地面-卫星”二元架构向“地-空-天”三维融合跃迁
  • 湖仓融合的“最后一公里”：StarRocks 存算分离如何优化湖上实时分析？