前后端调用 - 技术栈

前后端调用是指前端（如浏览器中的 Vue/React/原生 JS）通过 HTTP 协议等方式（通常是 RESTful API）向后端（如 Spring Boot、Node.js、Django 等）发送请求获取或提交数据。

一、调用方式

1. HTTP/HTTPS

Web 开发标准、通用、跨平台的调用方式

1) 前端请求方式

前端主要用 4 种方式发请求：

表单提交（最基础）： 浏览器自动刷新页面，适合简单提交。
AJAX（异步无刷新）： 页面不刷新，局部更新数据，体验更好。
Fetch API（现代浏览器原生）： 原生 JS，无需第三方库。
Axios（最常用，企业首选）： 基于 Promise，易用、稳定、生态完善。

2) 后端接口类型

RESTful API（最主流）：使用 GET/POST/PUT/DELETE 对应查 / 增 / 改 / 删。
**普通接口：**只使用 GET/POST。

3) 数据格式

JSON（几乎所有项目默认）

2. WebSocket

适用场景：后端主动向前端推送消息的场景，如：

聊天系统
直播
实时通知
在线协作
大屏数据实时更新

特点：

长连接，一次握手，永久通信
服务端可以主动发消息
比 HTTP 轮询更高效

协议：ws://、wss://

主流技术：Socket.IO(90% 项目用)、WebSocket。

3. Server-Sent Events (SSE)

前端也能用，但只能服务端推 → 前端收。只支持单向推送，但比 WebSocket 简单。

适合：日志推送、新闻更新、状态通知。

二、后端与后端调用方式

1. RPC 调用

RPC = 像调用本地函数一样调用远程服务比 HTTP 更快、更小、更强。是高性能远程调用

主流 RPC：

gRPC（Google 出品，主流）
Dubbo（阿里系，Java 常用）
Thrift

特点：

基于 TCP / HTTP2
二进制传输，体积小
强类型、自动生成代码
适合微服务内部通信

2. 消息队列 MQ

不是实时调用，而是异步调用。 发消息 + 消费消息 解耦超强，流量削峰神器。

常用：

RabbitMQ
RocketMQ
Kafka
Redis 队列

**适用：**订单、支付、短信、日志、异步任务。

模式： 前端 → 后端发消息 → 队列 → 另一个后端慢慢处理。

3. 基于 TCP 自定义协议

游戏、金融、硬件设备常用自己定义报文格式，速度最快。

**适用：**游戏客户端、IoT 设备、高频交易系统。

4. UDP 协议

无连接、速度极快、不保证可靠。

适用：直播、视频通话、游戏。

三、前后端分离

1.前后端不分离

1) MVC 耦合架构（JSP/PHP/Thymeleaf）

后端写页面 + 写数据
前端改个按钮颜色都要找后端
页面由服务器渲染 → 慢
前后端代码混在一起

2) 适用

小型系统、内部管理、快速上线、强SEO需求(如官网、资讯博客、新闻门户网站)、老旧存量项目。

3) 渲染页面

用户请求 → 后端 Controller 查数据 → 把数据塞进模板 → 后端在服务器上拼成完整 HTML → 返回给浏览器直接显示

2.前后端分离

1) 分工

前端：独立项目（Vue/React/HTML），只负责页面展示 + 交互，打包部署在 Nginx
后端：独立项目，只负责数据处理 + 业务逻辑（Java/Go/Node），提供接口
数据格式：统一 JSON

2) SSR（Server-Side Rendering）

SSR服务端渲染流程：

用户访问页面 → 服务器把 Vue/React 组件渲染成完整 HTML → 返回给浏览器（页面瞬间显示）→ 前端再 "激活" 交互能力 → 后续切换页面走前后端分离

四、常见问题

1. 数据安全

1) 传输安全

防止数据被窃听、篡改
必须使用HTTPS(HTTP + TLS/SSL 加密，传输全程加密)
敏感接口禁止使用GET传参

2) 身份安全

主流方案Token认证（JWT）
不能用明文密码、Session 共享
有效的Token校验规则

3) 数据安全

敏感数据加密传输
数据签名防篡改

4) 接口安全

接口限流
防止重复提交
跨域安全
防止XSS攻击
防止CSRF攻击

2. 跨域调用（前后端分离必遇到）

当前端地址和后端地址不同时，会产生跨域。

解决方案：

后端配置 CORS（最标准）

java 复制代码

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**") // 所有接口
                .allowedOrigins("*") // 允许哪些域名
                .allowedMethods("GET", "POST", "PUT", "DELETE") // 允许方法
                .allowCredentials(true) // 允许cookie
                .maxAge(3600);
    }
}

Nginx 反向代理（企业常用），使用前端 → Nginx → 后端的原理，浏览器看不到跨域。

javascript 复制代码

//  nginx配置文件
location /api {
    proxy_pass http://localhost:8080; # 转发到后端
    proxy_set_header Host $host;
}

前端代理（开发环境） Vue/React 内置的 proxy，只适用于只用于本地开发，不上线！

javascript 复制代码

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080', // 后端地址
        changeOrigin: true // 开启跨域代理
      }
    }
  }
}