在前后端分离架构中，后端只需要负责按照约定的数据格式向前端提供可调用的 API 服务即可。前后端之间通过 HTTP 请求进行交互，前端获取到数据后，进行页面的组装和渲染，最终返回给浏览器。

一句话定义之外，”如何做”要落到五个工程面：契约怎么定、跨域怎么通、认证怎么带、部署怎么分、协作怎么管。本文按这五面给出可执行的分离方案。

契约先行：API 是前后端唯一的交界

  • 接口文档即合同：OpenAPI/Swagger 或 YApi/Apifox 维护接口定义（路径、方法、入参、出参、错误码），变更走评审流程，杜绝”口头改接口”
  • 统一响应 envelope：{ code, message, data, traceId }，业务错误用 code 表达而非 HTTP 状态码混用（或明确约定：HTTP 表传输层、code 表业务层）
  • 版本化：URL 前缀 /v1/ 或 Header 版本；破坏性变更升版本、旧版本限期下线
  • Mock 先行：契约定稿后前端用 Mock 平台并行开发，不被后端进度阻塞——这是分离带来的最大效率收益

跨域：分离后的第一个技术问题

浏览器同源策略下，前端域名调后端 API 必须解决 CORS：

  • 后端统一配置 CorsFilter/@CrossOrigin（生产用网关层配置，避免散落注解）
  • 允许凭证（Cookie）时 Access-Control-Allow-Origin 不能为 *，且需 Allow-Credentials: true
  • 复杂请求触发 OPTIONS 预检：网关缓存预检结果（Access-Control-Max-Age）减少开销
  • 替代路线：开发期 vite/webpack devServer proxy、生产期 Nginx 反代同域——能同域反代就优先反代，CORS 配置面最小

分离架构（尤其多端：Web/APP/小程序）倾向无状态认证：

  • JWT：登录签发 access+refresh 双令牌；access 放内存/localStorage 有 XSS 风险，放 HttpOnly Cookie 又引 CSRF——权衡后常见组合：HttpOnly Cookie 存 refresh、内存存 access
  • OAuth2/OIDC：第三方登录与单点登录的标准协议，授权码模式 + PKCE 为前端 SPA 推荐流
  • 后端无状态后横向扩展不再需要会话共享，与微服务化互为前提

部署分离：两套产物两条流水线

  • 前端：构建产物为静态资源（JS/CSS/HTML），托管 CDN/Nginx/对象存储；发版=换静态资源+缓存策略（文件名 hash 强缓存、index.html 不缓存）
  • 后端：独立服务集群，只暴露 API；不再打包 JSP/模板
  • 灰度与回滚各自独立：前端回滚=切 CDN 版本，后端回滚=切服务版本，互不牵连
  • BFF 层（可选）：面向前端的聚合层，裁剪/组合后端微服务响应，避免前端直连十几个微服务

协作与边界管理

  • 联调环境：统一网关入口 + 环境标识 Header 路由到对应后端环境
  • 错误排查：traceId 贯穿前后端日志（响应 envelope 带回），客服报障可直接定位
  • 接口变更通知：文档平台订阅通知 + CI 中契约测试（Pact）防破坏性变更上线

分离的收益与代价

收益：并行开发、独立部署、多端复用 API、前端技术栈自由、CDN 加速静态资源。

代价：跨域与认证复杂度上升、接口治理成本（文档/版本/契约测试）、首屏需额外请求数据（SEO 需 SSR/预渲染补偿）。

前后端分离的本质是把”页面”从后端的职责中剥离，让 API 成为唯一契约；做得好坏不取决于技术选型，而取决于契约治理的纪律——文档、版本、Mock、契约测试四件套齐备，分离才是效率工具，否则只是把耦合从代码搬到了口头约定。