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

目录
  • 一、Gateway网关简介
  • 二、Gateway使用步骤
    • 步骤1：搭建模块并引入依赖
    • 步骤2：添加配置文件
    • 步骤3：创建启动类
  • 网关初步测试
  • 三、Gateway解决跨域问题

一、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网关跨域的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 分布式开发医疗挂号系统数据字典模块前后端实现

    分布式开发医疗挂号系统数据字典模块前后端实现

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

  • 实战开发分布式医疗挂号系统上传医院接口

    实战开发分布式医疗挂号系统上传医院接口

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

  • 分布式医疗挂号系统EasyExcel导入导出数据字典的使用

    分布式医疗挂号系统EasyExcel导入导出数据字典的使用

    目录 一.导出数据字典到Excel 1.创建导出实体类 2.后台接口代码 Controller层 Service层 3.页面导出按钮 4.测试数据导出到Excel 二.导入数据字典到网页 1.后台接口代码 Controller层 Service层 配置监听器 2.页面导入按钮 3.测试数据导入到网页 一.导出数据字典到Excel 1.创建导出实体类 这里导出数据时,只导出网页上每条记录的id.父id.名称.编码.值. @Data public class DictEeVo { @ExcelPro

  • 实战分布式医疗挂号系统开发医院科室及排班的接口

    实战分布式医疗挂号系统开发医院科室及排班的接口

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

  • 分布式医疗挂号系统SpringCache与Redis为数据字典添加缓存

    分布式医疗挂号系统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

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

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

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

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

    分布式医疗挂号系统整合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到通用模块

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

  • VUE开发分布式医疗挂号系统的医院设置页面步骤

    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搭建分布式医疗挂号系统后台管理页面示例步骤

    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 三.登录改造 登入方法改造 获取用户信息方法改造 登出方法改造 前端登出方法改造

随机推荐