怎么整合Gateway網關解決跨域問題

本篇內容介紹了“怎么整合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網關解決跨域問題”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！