poxiaoxi博客做网站时经常会听到“这个页面要调接口”“接口返回的数据不对”“后端接口还没做好”。这里说的接口，大多数情况下指API，也就是不同程序之间按照约定交换数据的一种方式。
例如商品列表页面本身不一定保存商品数据。页面打开以后，前端JavaScript向服务器请求商品接口，后端查询数据库，再把商品名称、价格、库存等数据返回给前端，前端收到以后才把内容显示到网页上。这整个过程中，前端和后端连接的位置就是开发人员常说的“接口”。
接口本质上是一份通信约定
接口并不等于某一段固定代码，更重要的是双方约定怎么通信。一个HTTP接口通常会明确几件事情：
请求哪个地址；
使用GET、POST还是其他HTTP方法；
需要提交哪些参数；
是否需要登录或携带Token；
服务器会返回什么数据；
请求失败时如何表示错误。
例如网站需要查询编号为1001的商品，接口可能设计为：
GET /api/products/1001
服务器处理请求后返回：
{
"id": 1001,
"name": "无线鼠标",
"price": 99,
"stock": 25
}前端不需要知道商品数据具体存在哪张数据库表里，只需要按照接口约定发送请求并处理返回结果。
一次接口请求包含什么
在浏览器开发者工具的Network面板里打开一个接口请求，通常会看到URL、Method、Headers、Payload、Response、Status Code等信息。它们分别对应接口通信中的不同部分。
| 内容 | 作用 | 示例 |
|---|---|---|
| URL | 接口地址 | /api/users/100 |
| Method | 本次请求要执行什么操作 | GET、POST |
| Headers | 附加的请求信息 | Content-Type、Authorization |
| Query | URL中的查询参数 | ?page=2&size=20 |
| Body | 发送给服务器的数据 | 用户名、订单信息等 |
| Response | 服务器返回的数据 | JSON、文本、文件等 |
| Status Code | HTTP处理结果 | 200、404、500 |
所以开发人员说“接口报错”，还需要继续判断到底是请求地址错了、参数不对、没有权限，还是服务器内部处理失败。
GET和POST是什么意思
HTTP提供多种请求方法，接口会根据操作目的选择相应的方法。网站开发中最常见的是GET和POST。
GET /api/articles/10
GET通常用于读取资源，例如获取文章、商品或者用户信息。
POST /api/orders
POST通常用于把数据提交给服务器进行处理，例如创建订单、提交表单。
还会遇到PUT、PATCH和DELETE：
PUT：通常用于创建或替换指定资源；PATCH：通常用于部分修改资源；DELETE：用于删除资源。
这些方法描述的是HTTP请求语义，具体接口最终怎样设计，仍然由服务端接口规范决定。
为什么接口经常返回JSON
网页接口经常使用JSON传递结构化数据，因为JavaScript处理这种格式比较方便。
例如登录接口可能返回：
{
"user": {
"id": 35,
"name": "Tom"
},
"login": true
}前端收到数据后，就可以读取其中的字段：
data.user.name data.login
不过接口并不只能返回JSON。根据用途不同，也可能返回HTML、XML、纯文本、图片或其他文件。
前端是怎么调用接口的
浏览器JavaScript可以使用Fetch API发送HTTP请求。例如：
fetch("/api/products/1001")
.then(response => response.json())
.then(data => {
console.log(data);
});这段代码的过程并不复杂：浏览器请求商品接口，服务器返回响应，JavaScript再读取其中的数据。
实际项目一般还要处理请求失败、加载状态、超时、登录状态以及业务错误，所以真正的接口调用代码通常会比这个示例完整。
接口为什么需要登录和鉴权
并不是所有接口都允许任何人访问。例如查看公开文章可以不登录，而查看个人订单、修改密码或者提交后台内容显然需要确认用户身份。
因此接口通常还会涉及Cookie、Session、Token或者Authorization请求头。
例如请求可能包含：
Authorization: Bearer xxxxxxxxxx
服务器收到请求后验证身份和权限，再决定是否允许访问对应数据。
这里也能看出为什么不能只依靠前端隐藏按钮来做权限控制。即使网页没有显示“删除用户”按钮，后端接口本身仍然需要验证请求者是否具有删除权限。
常见HTTP状态码怎么看
服务器除了返回业务数据，还会通过HTTP状态码表示请求处理结果。
| 状态码 | 常见含义 |
|---|---|
| 200 | 请求成功 |
| 201 | 资源创建成功 |
| 204 | 成功处理，但没有响应正文 |
| 400 | 请求存在问题 |
| 401 | 缺少有效身份认证 |
| 403 | 服务器拒绝执行该请求 |
| 404 | 目标资源没有找到 |
| 500 | 服务器内部错误 |
排查网站功能异常时，先看Network里的接口状态码往往很有帮助。例如页面一直显示“加载失败”，而接口返回500，那么问题通常需要继续从服务端查；如果是401，则应该优先检查登录状态和身份认证。
接口跨域又是什么问题
前端页面和接口不一定部署在同一个域名。例如网页位于：
https://www.example.com
接口却位于：
https://api.example.net
浏览器中的JavaScript发起这类跨源请求时，会受到同源策略和CORS机制的约束。服务器需要按照规则返回相应的CORS响应头，浏览器才会允许前端代码访问响应内容。
所以遇到“浏览器访问接口报跨域，但是直接打开接口地址正常”的情况，并不一定是接口本身无法访问，而可能是浏览器的跨源安全规则没有得到服务器正确响应。
接口文档是给前后端对接用的
前端开发不应该靠猜测接口参数。正常项目会提供接口文档，常见内容包括：
接口：获取文章详情
请求：
GET /api/articles/{id}
参数：
id 文章ID
成功返回：
{
"id": 100,
"title": "文章标题",
"content": "文章内容"
}接口比较多时，可以使用OpenAPI等规范描述HTTP API，再配合相关工具生成和维护接口文档。这样前端、后端和测试人员看到的是同一套接口定义。
接口不等于一个普通网址
接口确实经常表现为一个URL，但不能简单理解成“接口就是网址”。URL只是HTTP API中的组成部分之一。
例如下面两个请求地址完全相同：
GET /api/articles/100 DELETE /api/articles/100
由于HTTP方法不同，它们表达的操作也不同。完整理解一个接口，需要同时看地址、方法、参数、请求头、请求体、返回结果和权限要求。
另外，API也不只有常见的REST风格HTTP接口。网站项目还可能使用GraphQL、RPC、WebSocket等通信方式。因此开发人员日常所说的“接口”虽然经常指HTTP API，但API本身是一个更宽泛的概念。
不会写代码也可以查看网站接口
如果只是想了解某个网页调用了哪些接口，可以打开Chrome或Edge开发者工具，进入Network面板，然后刷新页面或执行某个操作。
例如点击“下一页”后出现一个新的Fetch/XHR请求，就可以打开查看：
Request URL：请求了哪个接口；
Request Method：使用什么HTTP方法；
Query String Parameters：URL参数；
Request Payload：提交了什么数据；
Response：服务器返回了什么；
Status Code：请求是否成功。
理解这些内容以后，再听到“前端正在调接口”，实际指的就是前端按照约定向后端发送请求，再根据服务器返回的数据更新网页。很多看似复杂的前后端问题，也可以沿着“请求发了什么、服务器回了什么”这条线逐步排查。
精彩评论