前言：打破“前后端孤岛”
现实开发中常见的场景：
前端问后端：“接口什么时候好？”后端问前端：“页面写完了吗？”
联调时发现字段名对不上：后端叫 user_name，前端用的是 username
接口调通了但数据不显示，打开控制台发现返回的是 {data: null, code: 500}
修改一个字段，需要同时改前端、后端、文档，还容易漏
这些问题的核心在于：前后端之间缺少标准化的契约。而这个契约，就是 API（应用程序接口）。
API 是前后端之间的“桥梁”和“合同”。前端按照合同发送请求，后端按照合同返回数据，双方各自独立开发，最后联调对接。
本文将从零开始，系统讲解：
API 的设计规范（RESTful、GraphQL）
HTTP 协议的深入理解
前后端联调的完整流程
接口调试工具（Postman、Apifox）
常见问题与解决方案
每一部分都有详细的原理说明和代码示例，让你不仅会调接口，更能设计出优雅、健壮的 API。
一、API 基础：什么是接口？
1.1 API 的定义
API（Application Programming Interface，应用程序编程接口）是一组定义了不同软件组件之间如何交互的规则。
在 Web 开发中，API 通常指 HTTP API：前端通过 HTTP 协议向后端发送请求，后端返回 JSON/XML 格式的数据。
前端（浏览器/App） -- HTTP 请求 --> 后端服务器
<-- JSON 数据 --
1.2 一个好的 API 应该具备的特征
二、HTTP 协议深入理解
API 基于 HTTP 协议，理解 HTTP 是设计和使用 API 的基础。
2.1 HTTP 请求结构
一个完整的 HTTP 请求包含四个部分：
POST /api/users HTTP/1.1 ← 请求行：方法 + 路径 + 协议版本
Host: api.example.com ← 请求头（Headers）
Content-Type: application/json
Authorization: Bearer xxxxx
User-Agent: Mozilla/5.0
← 空行（分隔头部和体）
{ ← 请求体（Body）
"username": "张三",
"email": "zhangsan@example.com"
}
2.2 HTTP 请求方法（Method）
幂等性：多次执行同一操作，结果相同。
GET /users/1 执行10次，每次返回相同结果 ✅
POST /users 执行10次，会创建10个用户 ❌
2.3 HTTP 状态码（Status Code）
状态码是服务器告诉客户端“处理结果”的三位数字。
常用状态码详解：
// 2xx 成功
200 OK // 请求成功（GET、PUT、PATCH）
201 Created // 资源创建成功（POST）
204 No Content // 请求成功，但没有返回内容（DELETE）
// 4xx 客户端错误
400 Bad Request // 请求参数错误（格式不对、缺少字段）
401 Unauthorized // 未认证（没有登录或 token 过期）
403 Forbidden // 无权限（登录了但没权限操作）
404 Not Found // 资源不存在
405 Method Not Allowed // HTTP 方法不允许
409 Conflict // 冲突（用户名已存在）
422 Unprocessable Entity // 请求格式正确但语义错误
// 5xx 服务端错误
500 Internal Server Error // 服务器内部错误
502 Bad Gateway // 网关错误
503 Service Unavailable // 服务不可用（过载或维护）
504 Gateway Timeout // 网关超时
2.4 HTTP 请求头（Headers）
请求头携带了请求的元信息：
# 最常用的请求头
Host: api.example.com # 目标服务器
User-Agent: Mozilla/5.0 # 客户端标识
Accept: application/json # 期望的响应格式
Accept-Language: zh-CN # 期望的语言
Content-Type: application/json # 请求体的格式
Content-Length: 1024 # 请求体长度
Authorization: Bearer token123 # 认证令牌
Cookie: sessionId=abc123 # Cookie
Origin: https://myapp.com # 请求来源（CORS）
Referer: https://myapp.com/home # 来源页面
2.5 响应头（Response Headers）
Content-Type: application/json # 响应的格式
Content-Length: 512 # 响应体长度
Cache-Control: max-age=3600 # 缓存策略
Set-Cookie: sessionId=abc123 # 设置 Cookie
Access-Control-Allow-Origin: * # CORS 跨域配置
