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 发现)
    • 避免前端直连微服务,保证安全性与可维护性
相关推荐
徐同保12 分钟前
vue.config.ts配置代理解决跨域,配置开发环境开启source-map
前端·javascript·vue.js
Vv1997_18 分钟前
JavaWeb后端全局异常处理
状态模式
Hexene...30 分钟前
【前端Vue】npm install时根据新的状态重新引入实际用到的包,不引入未使用到的
前端·vue.js·npm
2301_7806698636 分钟前
Vue(入门配置、常用指令)、Ajax、Axios
前端·vue.js·ajax·javaweb
码农幻想梦36 分钟前
Vue3入门到实战【尚硅谷】
前端·vue
hudou_k38 分钟前
利用WebNaket实现Web应用直接访问硬件设备
前端
吃茄子的猫38 分钟前
若依框架根据当前登录人信息,显示不同的静态公司logo
前端·vue
LZQ <=小氣鬼=>1 小时前
React + Ant Design (antd) 国际化完整实战教程
前端·react.js·前端框架·antd·moment
星海拾遗1 小时前
react源码从入门到入定
前端·javascript·react.js
Charlie_lll1 小时前
学习Three.js–星环粒子(ShaderMaterial)
前端·three.js