Spring Cloud 前端调用后端接口方式

在 Spring Cloud 微服务架构中,前端调用后端接口通常不直接通过 Eureka,而是通过以下两种核心方式实现:

一、前端直接调用后端服务(需解决跨域和地址管理问题)

1. AJAX 直接调用

前端通过 HTTP 请求(如 Axios、Fetch)直接访问后端服务的 IP 或域名,例如:

javascript

复制代码
axios.get("http://service-hi:8081/hi/name")

缺点:

  • 需手动管理后端服务地址(IP/端口),难以适应动态扩缩容
  • 需处理跨域问题(CORS),需在后端服务配置 @CrossOrigin 或网关层统一处理
2. 适用场景

仅适合开发环境或服务数量极少的简单项目,生产环境不推荐。

二、通过 API 网关调用(主流方案)

API 网关(如 Spring Cloud Gateway)作为统一入口,是生产环境推荐方式:

1. 工作流程
2.网关核心优势
功能 说明
服务发现集成 自动从 Eureka 获取服务实例列表,无需硬编码地址
动态路由 配置路由规则(如 /api/user/** → user-service)
统一鉴权/限流 在网关层实现身份验证(JWT)、请求限流等
协议转换 支持 REST、WebSocket 等协议转发
负载均衡 集成 Ribbon 实现客户端负载均衡

三、服务间后端调用(与前端无关但需了解)

若前端请求需触发多个微服务调用(如 A 服务调 B 服务),此时后端使用:

1. RestTemplate + Ribbon

java

复制代码
@Bean
@LoadBalanced // 集成Eureka服务发现
public RestTemplate restTemplate() {
  return new RestTemplate();
}
2.OpenFeign 声明式调用

java

复制代码
@FeignClient("service-hi")
public interface ServiceHi {
  @GetMapping("/hi/{name}")
  String sayHi(@PathVariable String name);
}
  • 通过接口伪装 HTTP 客户端,自动负载均衡 (方便简洁)

关键结论

  1. Eureka 的角色
    • 作为服务注册中心管理服务实例地址,不直接处理前端请求
    • 网关/后端服务通过 Eureka 动态解析服务名 → 实际 IP/端口
  2. 生产环境最佳实践
    • 前端 → 网关 → 后端服务(通过 Eureka 发现)
    • 避免前端直连微服务,保证安全性与可维护性
相关推荐
Dorcas_FE6 分钟前
axios请求缓存与重复拦截:“相同请求未完成时,不发起新请求”
前端·spring·缓存
dreams_dream14 分钟前
vue中axios与fetch比较
前端·javascript·vue.js
梦鱼34 分钟前
Vue 项目图标一把梭:Iconify 自用小记(含 TS/JS 双版本组件)
前端·javascript·vue.js
best66635 分钟前
Flex 与 Grid 的 order 参数:布局界的 "插队神器"
前端
小噔小咚什么东东36 分钟前
看到了很多次WebRTC,但是你真的需要它吗?
前端·webrtc
猫七先生36 分钟前
微信小程序一键登录可行性方案
前端·微信小程序
维他AD钙37 分钟前
前端开发 8 个非常实用小技巧:高效解决日常开发痛点
前端
光影少年41 分钟前
webpack和vite优化方案都有哪些
前端·webpack·node.js
给月亮点灯|42 分钟前
Vue基础知识-脚手架开发-初始化目录解析
前端·javascript·vue.js