分布式医疗挂号系统整合Gateway网关解决跨域问题

2024-12-01 20:35:07

一、Gateway网关简介

API 网关是介于客户端和服务器端之间的中间层，所有的外部请求都会先经过API 网关这一层。也就是说，API 的实现方面更多的考虑业务逻辑，而安全、性能、监控可以交由 API 网关来做，这样既提高业务灵活性又不缺安全性。

Spring cloud gateway是spring官方基于Spring 5.0、Spring Boot2.0和Project Reactor等技术开发的网关，Spring Cloud Gateway旨在为微服务架构提供简单、有效和统一的API路由管理方式，Spring Cloud Gateway作为Spring Cloud生态系统中的网关，目标是替代Netflix Zuul，其不仅提供统一的路由方式，并且还基于Filer链的方式提供了网关基本的功能，例如：安全、监控/埋点、限流等。

二、Gateway使用步骤

步骤1：搭建模块并引入依赖

在项目中使用Maven模块，搭建server-gateway模块。

由于Gateway也需要在Nacos中进行注册，所以在引入Gateway依赖的同时，也要引入Naocs依赖。

        <!--Gateway-->
        <dependency>
            <groupId>org.springframework.cloud</groupId>
            <artifactId>spring-cloud-starter-gateway</artifactId>
        </dependency>

        <!-- 服务注册 -->
        <dependency>
            <groupId>com.alibaba.cloud</groupId>
            <artifactId>spring-cloud-starter-alibaba-nacos-discovery</artifactId>
        </dependency>

步骤2：添加配置文件

下面的配置表示将网关服务端口设置为9000后，配置了两个路由id：

# 服务端口
server.port=9000
# 服务名
spring.application.name=service-gateway

# nacos服务地址
spring.cloud.nacos.discovery.server-addr=127.0.0.1:8848

#使用服务发现路由
spring.cloud.gateway.discovery.locator.enabled=true

#设置路由id
spring.cloud.gateway.routes[0].id=service-hosp
#设置路由的uri
spring.cloud.gateway.routes[0].uri=lb://service-hosp
#设置路由断言,代理servicerId为auth-service的/auth/路径
spring.cloud.gateway.routes[0].predicates= Path=/*/hosp/**

#设置路由id
spring.cloud.gateway.routes[1].id=service-cmn
#设置路由的uri
spring.cloud.gateway.routes[1].uri=lb://service-cmn
#设置路由断言,代理servicerId为auth-service的/auth/路径
spring.cloud.gateway.routes[1].predicates= Path=/*/cmn/**

步骤3：创建启动类

@SpringBootApplication
public class ServerGatewayApplication {
    public static void main(String[] args) {
        SpringApplication.run(ServerGatewayApplication.class, args);
    }
}

网关初步测试

后端服务配置好后启动相应微服务，在前端dev.env.js文件中，也将端口设置为9000与后端对应：

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  BASE_API: '"http://localhost:9000"',
})

关闭之前配置的Nginx，在不同端口之前发送请求，都可以成功访问：

三、Gateway解决跨域问题

在service_gateway模块创建配置类，写入下面的内容：

@Configuration
public class CorsConfig {
    @Bean
    public CorsWebFilter corsFilter() {
        CorsConfiguration config = new CorsConfiguration();
        config.addAllowedMethod("*");
        config.addAllowedOrigin("*");
        config.addAllowedHeader("*");

        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(new PathPatternParser());
        source.registerCorsConfiguration("/**", config);

        return new CorsWebFilter(source);
    }
}

配置好后，将之前项目中所有Controller中的@CrossOrigin注解删除掉。

再次启动后端微服务和前端项目，切换不同选项卡，发现跨域问题被成功解决掉：

以上就是分布式医疗挂号系统整合Gateway网关解决跨域问题的详细内容，更多关于分布式医疗挂号系统整合Gateway网关跨域的资料请关注我们其它相关文章！

分布式医疗挂号系统Nacos微服务Feign远程调用数据字典

目录步骤1:向Nacos服务中心注册微服务 (1)引入Nacos依赖步骤2:使用Feign进行远程调用 (1)service-hosp医院列表接口 (2)service-cmn医院等级/地址接口 (3)引入Feign依赖 (4)调用端通过包扫描Feign (5)远程调用步骤3:使用swagger测试需求:制作一个医院列表的显示功能.列表中包含医院编号.医院等级.医院地址.状态等.分析:首先确定是典型的条件查询带分页.由于医院的等级需要查询数据字典部分,这个调用是在不同的微服务模块中,这就
实战开发分布式医疗挂号系统上传医院接口

目录一.集成MongoDB 二.开发Controller层医院管理的Service层四.Respository数据层五.测试上传医院接口需求:在<分布式预约挂号平台>中完成上传医院接口开发,再通过医院接口模拟系统(医院管理表)调用平台中的接口,从而实现上传医院的功能.另外,所有通过平台中接口上传的信息都需要被保存到MongoDB中,通过MongoDB来进行操作. 本篇文章根据上述需求,对<分布式医疗挂号系统>中的上传医院接口进行实现,项目代码已同步至github,http
分布式医疗挂号系统SpringCache与Redis为数据字典添加缓存

目录一.SpringCache介绍二.项目集成Spring Cache 1.添加缓存相关依赖 2.添加redis配置类 3.添加redos配置三.数据字典配置Spring Cache 1.缓存@Cacheable 2.缓存@CachePut 四.测试缓存是否添加成功一.SpringCache介绍 Spring Cache 是一个优秀的缓存组件.自Spring 3.1起,提供了类似于@Transactional注解事务的注解Cache支持,且提供了Cache抽象,方便切换各种底层Cache
分布式开发医疗挂号系统数据字典模块前后端实现

目录一.后端接口 1.数据库表设计 2.编写三层调用 Controller层 Service层 Mapper层二.前端页面 1.添加路由 2.添加跳转页面 3.页面表格渲染三.标准Debug流程数据字典可以管理系统常用的分类数据或固定数据,例如:省市区三级联动数据.民族数据.行业数据.学历数据等.由于我们的分布式医疗挂号系统大量使用这种数据,所有我们要做一个数据管理,方便管理系统数据,并且在一般的系统中基本都会做数据管理. 数据字典主要功能:使系统中的各项数据变的更加的严格,这样有
实战分布式医疗挂号系统开发医院科室及排班的接口

目录一.医院接口查询医院接口二.科室接口 (1)上传科室功能 (2)查询科室功能 (3)删除科室功能三.排班接口 (1)上传排班功能 (2)查询排班功能 (3)删除排班功能一.医院接口本文继续开发分布式医疗挂号系统,进入到医院信息.科室.排版接口的开发,内容比较枯燥.关于医院医院信息的上传接口实现,已经在上一篇文章中进行了介绍,本文继续对接口进行扩展. 查询医院接口 Controller层: @PostMapping("hospital/show") public Resu
分布式医疗挂号系统EasyExcel导入导出数据字典的使用

目录一.导出数据字典到Excel 1.创建导出实体类 2.后台接口代码 Controller层 Service层 3.页面导出按钮 4.测试数据导出到Excel 二.导入数据字典到网页 1.后台接口代码 Controller层 Service层配置监听器 2.页面导入按钮 3.测试数据导入到网页一.导出数据字典到Excel 1.创建导出实体类这里导出数据时,只导出网页上每条记录的id.父id.名称.编码.值. @Data public class DictEeVo { @ExcelPro
分布式医疗挂号系统整合Gateway网关解决跨域问题

目录一.Gateway网关简介二.Gateway使用步骤步骤1:搭建模块并引入依赖步骤2:添加配置文件步骤3:创建启动类网关初步测试三.Gateway解决跨域问题一.Gateway网关简介 API 网关是介于客户端和服务器端之间的中间层,所有的外部请求都会先经过API 网关这一层.也就是说,API 的实现方面更多的考虑业务逻辑,而安全.性能.监控可以交由 API 网关来做,这样既提高业务灵活性又不缺安全性. Spring cloud gateway是spring官方基于Sprin
实战分布式医疗挂号系统登录接口整合阿里云短信详情

目录步骤1:搭建service-user用户模块 1.启动类&配置网关步骤2:整合JWT 步骤3: 搭建service-msm短信模块(整合阿里云短信) 1.启动类&配置网关 4.三层调用步骤4:登录页面前端 1.封装api请求 2.添加登录组件 3.登录全局事件附加:用户认证与网关整合 1.在服务网关添加fillter 2.调整前端代码本篇文章完成的需求: 1,登录采取弹出层的形式. 2,登录方式: (1)手机号码+手机验证码 (2)微信扫描(后文完成) 3,无注册界面,第一次
实战分布式医疗挂号系统之整合Swagger2到通用模块

目录通用模块整合swagger2步骤 2.配置Swagger2 3.启动类添加包扫描测试 swagger常用注解本系列文章介绍从0开始搭建一个基于分布式的医疗挂号系统.本次四篇文章完成了医院设置微服务模块的后端接口,为了方便开发,对接口的返回结果.全局异常.全局日志进行了统一处理. 同时,为了方便进行访问测试,还整合了Swagger2工具,这些通用的模块中,除了全局日志被放在医院设置微服务模块的配置资源中,其余都统一被抽取在common模块中.具体实现可参考下面文章: 医院设置微服务 |
VUE开发分布式医疗挂号系统的医院设置页面步骤

目录一.显示记录列表功能 1.显示列表组件 2.分页组件 3.条件查询组件二.删除记录功能 1.删除单条记录 2.批量删除记录三.锁定和解锁功能四.添加记录功能五.修改功能六.解决组件重用问题分布式医疗挂号系统 | 开发医院设置页面在分布式医疗挂号系统中,前端主要使用的两个技术是Vue和ElementUI.医院设置微服务模块的后端之前已经完成,现在需要借助Vue+ElementUI完成医院设置微服务模块的前端页面: 一.显示记录列表功能 1.显示列表组件带斑马纹表格开发文档:
实战分布式医疗挂号系统之设置微服务接口开发模块

目录文章导读一.框架调用流程二.医院设置表接口开发 1.增 2.删 (1)逻辑删除记录 (2)批量删除记录 3.改 (1)修改记录 4.查 (1)查询所有记录 (2)条件查询带分页 (3)根据id获取记录 5.锁定和解锁表 6.发送签名密钥文章导读本系列文章介绍从0开始搭建一个基于分布式的医疗挂号系统.本次四篇文章完成了医院设置微服务模块的后端接口,为了方便开发,对接口的返回结果.全局异常.全局日志进行了统一处理. 同时,为了方便进行访问测试,还整合了Swagger2工具,这些通用的模
实战分布式医疗挂号系统之设置微服务搭建医院模块

目录文章导读一.项目模块划分图二.开发前的准备工作 1.医院设置数据库表设计 2.搭建医院设置微服务模块三.医院设置微服务模块开发步骤1:生成表对应的实体类步骤2:创建Mapper 步骤3:创建Service 步骤4:创建Controller 四.测试开发环境文章导读本系列文章介绍从0开始搭建一个基于分布式的医疗挂号系统.本次四篇文章完成了医院设置微服务模块的后端接口,为了方便开发,对接口的返回结果.全局异常.全局日志进行了统一处理. 同时,为了方便进行访问测试,还整合了Swag
分布式医疗挂号系统之搭建后台管理系统页面

目录前言一.搭建前端环境 (1)引入项目到项目工作区 (2)根据package.json下载依赖 (3)启动创建好的前端项目二.前端环境目录结构 (1)总体目录概览 (2)关键文件 package.js build/webpack.dev.conf.js index.html src/main.js config/dev.env.js src/utils/request.js src/api/login.js 三.登录改造 (1)登入方法改造获取用户信息方法改造登出方法改造前端登出方
VUE搭建分布式医疗挂号系统后台管理页面示例步骤

目录前言一.搭建前端环境 (1)引入项目到项目工作区 (2)根据package.json下载依赖 (3)启动创建好的前端项目二.前端环境目录结构 (1)总体目录概览 (2)关键文件 package.js build/webpack.dev.conf.js index.html src/main.js config/dev.env.js src/utils/request.js src/api/login.js 三.登录改造登入方法改造获取用户信息方法改造登出方法改造前端登出方法改造