PART 1 - 前后端通信

1.1 - 前后端通信格式

首先，在目前的大公司项目中，后端返回给前端的响应通常都遵循以下格式：

{
  "code": 0,
  "msg": "",
  "data": "响应数据内容"
}

在所有不是服务器错误的情况下，HTTP 状态码都是 200，而错误信息则通过 code 字段来表示。code 为 0 表示成功（有些也会用 200），非 0 表示失败，msg 为失败时的错误信息，data 为成功时的响应数据。

一般情况下，前端会根据 code 的值来判断请求是否成功，如果成功则继续处理 data 字段，否则提示 msg 字段的错误信息。

当然，如果项目存在中间层（一般使用 node.js 书写），那么中间层也会对前后端通信格式进行一定的封装（比如转换成前端需要格式，暂时缓存某些信息，用户输入的二次校验，后端出现错误时的记录^_^毕竟有的时候错误信息或堆栈不能直接暴露给用户），以便于更好地处理数据。

对于 jwt 的 token 验证，后端会在响应头中返回 Authorization 字段，前端需要将其保存在 localStorage（或者 pinia 等状态管理）中，以便在后续的请求中携带。

前端需要通过请求拦截器在请求头中添加 Authorization 字段，而后端也要有相应的拦截器（过滤器）来验证 Authorization 字段的合法性。

1.2 - 前后端通信方式

目前主流的前后端通信方式有以下几种：

  • ajax：通过 XMLHttpRequest 对象来与服务器交互，可以在不重新加载整个页面的情况下更新页面的部分内容。
  • fetch：ajax 的替代品，使用 Promise 对象，更加强大和灵活。
  • axios：基于 Promise 的 HTTP 客户端，可以在浏览器和 node.js 中使用。
  • WebSocket：一种网络通信协议，可以实现客户端和服务器全双工通信。
  • Server-Sent Events：一种服务器推送技术，服务器可以不断推送数据给客户端。
  • WebRTC：一种实时通信技术，可以实现浏览器之间的音视频通话。
  • GraphQL：一种查询语言，可以让客户端按需获取数据。
  • gRPC：一种高性能、开源和通用的 RPC 框架，可以在任何环境中运行。

我们一般使用 axios 来进行前后端通信，因为它功能强大，易用，支持拦截器，支持 Promise，支持取消请求等等。

1.3 - API 命名规范

谈到前后端通信，就不得不提到 API 的命名规范。API 的命名规范对于前后端的协作非常重要，它可以让前后端更好地理解对方的意图，提高开发效率。

API 的命名规范一般遵循 RESTful 风格，RESTful 是一种软件架构风格，它是一种设计风格而不是标准，它的核心思想是：URL 表示资源，HTTP 方法表示对资源的操作。

首先是请求类型：

  • GET：获取资源，一般用于获取数据。（比如获取用户信息，获取文章列表）
  • POST：创建资源，一般用于新增数据。（比如登录注册）
  • PUT：更新资源，一般用于更新数据。（比如更新用户信息）
  • DELETE：删除资源，一般用于删除数据。（比如删除内容）

然后是资源的命名，这部分要先找好对应数据模型的名字，然后再进行命名： 一般会以 /api 开头，然后根据资源的不同进行分类，比如用户相关的 API 就以 /api/user 开头，文章相关的 API 就以 /api/article 开头。 当然也可以标识不同版本的 API，比如 /api/v1/user，/api/v2/user。 举个例子：

  • GET /api/user/list：获取用户列表
  • POST /api/user/add：新增用户
  • PUT /api/user/update：更新用户信息

1.4 - 跨域和独立开发

在前后端分离的项目中，由于前端和后端分别部署在不同的服务器上，所以会遇到跨域问题。 这个问题在开发环境中一般不会出现，因为前后端都是部署在同一个服务器上的，但是在生产环境中就会出现。 解决方案也非常简单，就是（比如 Vite）可以在 vite.config.js 中配置 proxy 代理，将请求代理到后端服务器上，这样就不会出现跨域问题了。

另外，前后端分离的项目中，前后端可以独立开发，前端可以使用 mock 数据来模拟后端的数据，这样就可以不依赖后端的接口来进行开发，提高开发效率。

1.5 - 前后端安全

前后端通信中，安全问题也是非常重要的，（这里挖坑，以后慢慢总结慢慢补上）

  • XSS（跨站脚本攻击）：攻击者在网页中注入恶意脚本，当用户访问网页时，恶意脚本就会执行。常见的防御措施包括：

    • 对用户输入进行严格的校验和过滤。
    • 使用合适的编码（如 HTML 编码）来处理用户输入。
    • 使用内容安全策略（CSP）来限制可执行的脚本来源。

  • CSRF（跨站请求伪造）：攻击者盗用了你的身份，以你的名义发送恶意请求。常见的防御措施包括：

    • 使用 CSRF 令牌来验证请求的合法性。
    • 对敏感操作使用 POST 请求而不是 GET 请求。
    • 检查请求的来源（如 Referer 头）。

  • SQL 注入：攻击者通过在输入框中输入恶意的 SQL 语句，来执行恶意的 SQL 语句。常见的防御措施包括：

    • 使用预编译语句（Prepared Statements）或参数化查询来处理用户输入。
    • 对用户输入进行严格的校验和过滤。
    • 使用 ORM 框架来避免直接操作 SQL。

  • 中间人攻击：攻击者可以窃取你的信息，比如账号密码等。常见的防御措施包括：

    • 使用 HTTPS 来加密通信。
    • 使用强大的加密算法来保护数据。
    • 验证服务器的证书，防止被伪造。

  • 点击劫持：攻击者将一个透明的页面覆盖在一个正常的页面上，用户在点击正常页面时，实际上是点击了透明页面上的按钮。常见的防御措施包括：

    • 使用 X-Frame-Options HTTP 头来防止页面被嵌入到 iframe 中。
    • 使用 Content Security Policy (CSP)来限制页面的嵌入方式。

  • 数据泄露：用户的数据被泄露。常见的防御措施包括：

    • 对敏感数据进行加密存储。
    • 使用访问控制机制来限制数据的访问权限。
    • 定期进行安全审计和漏洞扫描。

  • 敏感信息泄露：用户的敏感信息被泄露。常见的防御措施包括：

    • 对敏感信息进行加密传输和存储。
    • 避免在日志和错误信息中暴露敏感信息。
    • 使用安全的身份验证和授权机制来保护敏感信息。

1.6 - 总结

对于前后端分离项目，前后端通信是非常重要的，它关系到项目的开发效率和用户体验。前后端通信的格式、方式、命名规范、安全问题等都是需要我们重点关注的地方。 更多的，项目开始之前，务必要明确好项目的需求，前后端的接口文档，以及前后端的通信格式，这样可以避免后期的沟通成本和开发成本（虽然我是全栈，但是说多了都是泪）。

最后更新于 2025/8/18 00:55:08

更新历史

本书还在编写中..

前往 Github Repo 参与讨论或贡献内容。