怎么整合Gateway網(wǎng)關(guān)解決跨域問題

本篇內(nèi)容介紹了“怎么整合Gateway網(wǎng)關(guān)解決跨域問題”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

一、Gateway網(wǎng)關(guān)簡(jiǎn)介

API 網(wǎng)關(guān)是介于客戶端和服務(wù)器端之間的中間層，所有的外部請(qǐng)求都會(huì)先經(jīng)過API 網(wǎng)關(guān)這一層。也就是說，API 的實(shí)現(xiàn)方面更多的考慮業(yè)務(wù)邏輯，而安全、性能、監(jiān)控可以交由 API 網(wǎng)關(guān)來做，這樣既提高業(yè)務(wù)靈活性又不缺安全性。

Spring cloud gateway是spring官方基于Spring 5.0、Spring Boot2.0和Project Reactor等技術(shù)開發(fā)的網(wǎng)關(guān)，Spring Cloud Gateway旨在為微服務(wù)架構(gòu)提供簡(jiǎn)單、有效和統(tǒng)一的API路由管理方式，Spring Cloud Gateway作為Spring Cloud生態(tài)系統(tǒng)中的網(wǎng)關(guān)，目標(biāo)是替代Netflix Zuul，其不僅提供統(tǒng)一的路由方式，并且還基于Filer鏈的方式提供了網(wǎng)關(guān)基本的功能，例如：安全、監(jiān)控/埋點(diǎn)、限流等。

二、Gateway使用步驟

步驟1：搭建模塊并引入依賴

在項(xiàng)目中使用Maven模塊，搭建server-gateway模塊。

由于Gateway也需要在Nacos中進(jìn)行注冊(cè)，所以在引入Gateway依賴的同時(shí)，也要引入Naocs依賴。

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

        <!-- 服務(wù)注冊(cè) -->
        <dependency>
            <groupId>com.alibaba.cloud</groupId>
            <artifactId>spring-cloud-starter-alibaba-nacos-discovery</artifactId>
        </dependency>

步驟2：添加配置文件

下面的配置表示將網(wǎng)關(guān)服務(wù)端口設(shè)置為9000后，配置了兩個(gè)路由id：

# 服務(wù)端口
server.port=9000
# 服務(wù)名
spring.application.name=service-gateway

# nacos服務(wù)地址
spring.cloud.nacos.discovery.server-addr=127.0.0.1:8848

#使用服務(wù)發(fā)現(xiàn)路由
spring.cloud.gateway.discovery.locator.enabled=true

#設(shè)置路由id
spring.cloud.gateway.routes[0].id=service-hosp
#設(shè)置路由的uri
spring.cloud.gateway.routes[0].uri=lb://service-hosp
#設(shè)置路由斷言,代理servicerId為auth-service的/auth/路徑
spring.cloud.gateway.routes[0].predicates= Path=/*/hosp/**

#設(shè)置路由id
spring.cloud.gateway.routes[1].id=service-cmn
#設(shè)置路由的uri
spring.cloud.gateway.routes[1].uri=lb://service-cmn
#設(shè)置路由斷言,代理servicerId為auth-service的/auth/路徑
spring.cloud.gateway.routes[1].predicates= Path=/*/cmn/**

步驟3：創(chuàng)建啟動(dòng)類

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

網(wǎng)關(guān)初步測(cè)試

后端服務(wù)配置好后啟動(dòng)相應(yīng)微服務(wù)，在前端dev.env.js文件中，也將端口設(shè)置為9000與后端對(duì)應(yīng)：

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

關(guān)閉之前配置的Nginx，在不同端口之前發(fā)送請(qǐng)求，都可以成功訪問：

三、Gateway解決跨域問題

在service_gateway模塊創(chuàng)建配置類，寫入下面的內(nèi)容：

@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);
    }
}

配置好后，將之前項(xiàng)目中所有Controller中的@CrossOrigin注解刪除掉。

再次啟動(dòng)后端微服務(wù)和前端項(xiàng)目，切換不同選項(xiàng)卡，發(fā)現(xiàn)跨域問題被成功解決掉：

“怎么整合Gateway網(wǎng)關(guān)解決跨域問題”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！