前端和后端是怎么连接的？API、RESTful、JSON、CORS都是什么？

今天讲一下全栈领域的几个概念，如果你是做全栈的，比如 react 等等一定得懂。也就是解释了前端、后端连接的最底层的几个知识。

比如 API、RESTful、JSON、CORS 等等。

API 是什么？

首先是 API ，全名叫：Application Programming Interface ，应用程序编程接口。

看起来很复杂，其实就是前端和后端约定好的一些做事方法。

两个团队一般是分开运作的，你不用关心我里面怎么实现【把用户的姓名、性别储存好】、【给你找出来那些人的会员快到期了】，你只需要得到一个链接就行，比如 https://example.com/member/expiring-list 这种。

这就是 API 。

或者你也可以理解为办事窗口的地址也行，你想查资料，去谷歌百度，你想看视频，去抖音，你想干什么什么，就使用什么什么链接...

什么是 RESTful

然后是 RESTful 。这个我们可能经常看到，但很多初学者不太懂这个是什么。

这是一种 API 风格，就像白酒里的 【酱香型白酒】一样。

你在 A 公司，建立 API 是一种风格，你被开除了，去了 B 公司，又是另一种风格.... 那大局上来看，肯定在程序员市场里、开源程序社区里，都是不适合的。因此就设立了这种风格。

其实很简单，就是 url 代表资源， HTTP 的方法代表动作。

比如拿 /tasks 举例，url 就只有一个 tasks，然后我们有很多类型的 HTTP 请求，比如 GET POST...

Url 一样，但干的事各不相同，比如：

GET    /tasks        → 获取所有任务
POST   /tasks        → 创建一个任务
PUT    /tasks/1      → 完全更新 id 为 1 的任务
PATCH  /tasks/1      → 局部更新 ID 为 1 的任务
DELETE /tasks/1      → 删除 id 为 1 的任务

说明一下：PUT 表示用新数据替换整个资源，而 PATCH 仅更新你发送的特定字段，其余部分保持不变。

然后我们在写文档的时候，就写 GET /tasks 或者 DELETE /tasks 就行了，合格的前端程序员就知道怎么回事了，能干什么了。

如果你不懂 RESTful ，你设计了个 https://example.com/api/getTasks 这种 ，/getTasks 、/deleteTasks ，就不是 RESTful ，就会不方便。

状态码

好的，现在我们有了 api url 了，知道去哪个【办事窗口】做事了，但是，你需要一个响应。

这就是状态码:

200 OK               → 请求成功，服务器返回所请求的数据
201 Created          → 资源已成功创建
400 Bad Request      → 请求有语法错误，服务器无法理解
401 Unauthorized     → 未授权，需要登录后才能访问
403 Forbidden        → 已登录但无权限访问该资源
404 Not Found        → 请求的资源不存在
500 Internal Error   → 服务器内部错误，导致请求未能完成

这是国际互联网标准的状态码。

常用的就是 404 ，200, 500 我们的前端代码可以根据不同的状态码，去搞不同的事。

JSON

前端和后端相互交换数据，常用的一种格式是 JSON 。

当然，还有很多格式，比如二进制、xml ..... 但更常用的是 JSON 。

它的优点只有一个，就是 人类阅读友好 。

{
  "id": 12345,
  "name": "张三",
  "email": "zhangsan@example.com",
  "age": 28,
  "isActive": true,
  "roles": ["admin", "editor"],
  "createdAt": "2024-04-27T10:15:30Z",
  "metadata": null
}

我们前端向后端发信息时，就类似这样：

fetch('/api/user', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' }, // this line matters
  body: JSON.stringify(
    {
      "id": 12345,
      "name": "张三",
      "email": "zhangsan@example.com",
      "age": 28,
      "isActive": true,
      "roles": ["admin", "editor"],
      "createdAt": "2024-04-27T10:15:30Z",
      "metadata": null
    }
  )
})

注意，我们一定得加上 application/json 等类似标志，这样后端才将其看做是 JSON 解析。

之后我们的后端，比如 express.JS 就这样解析你的信息，比如打印「张三」：

const express = require('express');
const app = express();

app.use(express.json()); // 解析 Content-Type: application/json 的请求体

app.post('/api/user', (req, res) => {
  const { id, name, email, age, isActive, roles, createdAt, metadata } = req.body;
  console.log(name); // "张三"
  res.json({ message: '接收成功', user: req.body });
});

app.listen(3000);

两个 await

如果你是个前端，你就知道异步。

在 JS 里，如果你给后端发信息，然后获取返回的信息，如果是调用 fetch ，你会发现有两个 await 。

// 第一个 await , 获取响应头信息
const res = await fetch('/api/user');   

// 第二个 await , 读取并解析响应体数据
const data = await res.json();          

哈哈哈，这里有个很有意思的知识！

你是不是以为，内容和 状态码 ，比如 200 、404 ，都是同一时刻到达你电脑的？

并不是，其实，后端给前端响应，并不一致。

你发一条请求，后端接到后，还没开始处理完整的数据内容，就会先把响应头发给你。这样很重要！！！

程序员喜欢抽象概念，我们往往误以为羽毛和铁球在月球能同时掉地上，那在地球上也能。

其实不是这样。响应是很快的，东西还在路上运输。

第一个 await 是响应，第二个才是服务器返回给你的信息。

这是两个时间点。

（因此会出现一个现象：有的时候，服务器返回了 404 ，但你还是收到了正确的东西，，，或者说你收到了 200 OK ，但是你却没收到货）

CORS

这个叫 【跨源资源共享】 。

互联网上的内容，只有有链接有权限，是随意访问的。但是 浏览器 里内置了个安全规则：网页不能跨域名读取响应。

这个不是 浏览器 使坏，而是保护用户。否则任何网站都能利用你在另一个网站的登录身份，干坏事了。

但是，如果你的资源，在服务器端，设置为 CORS （主要是通过响应头），就是允许 跨资源共享，那么浏览器就允许 CORS 运行的网页去访问你的内容了。

OPTIONS /api/tasks HTTP/1.1
Origin: http://localhost:5173     # 就像这个，运行这个域名访问
Access-Control-Request-Method: POST

【注意：CORS 是由浏览器强制执行的，不是服务器，一定要记清。防君子不防小人】

如果 cors 运行所有网页，那么所有网页都能了，就比如我自己的网站里，很多 知乎 网站、新浪微博 网站的图片，而无法弄很多其他人网站里的图片。。 它们设置的 CORS 不同，知乎运行所有网站用它网站上的图片，像一个公益图床一样，速度还贼快。

基本就这个样子。