Angular 的 Spring Cloud Gateway Preflight Cors 错误

Posted

技术标签:

【中文标题】Angular 的 Spring Cloud Gateway Preflight Cors 错误【英文标题】:Spring Cloud Gateway Preflight Cors Error with Angular 【发布时间】:2021-07-13 07:04:25 【问题描述】:

我正在尝试将 Spring Cloud Gateway 与 Spring Security 一起使用,并尝试通过 Angular 调用其余 API,但出现以下错误

Access to XMLHttpRequest at 'http://localhost:9090/api/v1/publishers/?pageNo=1&pageSize=10&sort=name,desc&sort=city,desc' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.

根据文档https://cloud.spring.io/spring-cloud-gateway/multi/multi__cors_configuration.html

我必须在应用程序 yaml 文件中添加 globalcors。

这是我完整的 yaml 文件。

server:
  port: 9090
keycloak-client:
  server-url: http://keycloak-url:8080/auth
  realm: dev
spring:
  application:
    name: gateway
  security:
    oauth2:
      client:
        provider:
          keycloak:
            issuer-uri: $keycloak-client.server-url/realms/$keycloak-client.realm
            user-name-attribute: preferred_username
        registration:
          keycloak:
            client-id: cei-backend
            client-secret: f4d3242b-1fee-4dab-a491-d91ac51d637f
  cloud:
    gateway:
      default-filters:
        - TokenRelay
      globalcors:
        cors-configurations:
          '[/**]':
            allowedOrigins: "http://localhost:4200"
            allowedHeaders: "*"
            allowedMethods:
            - GET
            - POST
            - DELETE
            - PUT
      routes:
        - id: publisher_route
          uri: http://localhost:8000
          predicates:
            - Path=/api/v1/publishers/**
          filters:
            - RemoveRequestHeader=Cookie        
logging:
  level:
    org.springframework.cloud.gateway: DEBUG
    reactor.netty: DEBUG

以下是我的安全配置文件

@Configuration
public class SecurityConfig 

    @Bean
    public SecurityWebFilterChain springSecurityFilterChain(ServerHttpSecurity http,
                                                            ReactiveClientRegistrationRepository clientRegistrationRepository) 
        // Authenticate through configured OpenID Provider
        http.oauth2Login();
        // Also logout at the OpenID Connect provider
        http.logout(logout -> logout.logoutSuccessHandler(new OidcClientInitiatedServerLogoutSuccessHandler(
                clientRegistrationRepository)));
        // Require authentication for all requests
        http.authorizeExchange().anyExchange().authenticated();
        // Allow showing /home within a frame
        http.headers().frameOptions().mode(Mode.SAMEORIGIN);
        // Disable CSRF in the gateway to prevent conflicts with proxied service CSRF
        http.csrf().disable();

        return http.build();
    

我正在从角度调用此 API,但我在预检请求中遇到了 CORS 错误。 我已经尝试了一切,但不知道我在哪里犯了错误。有什么想法吗?

【问题讨论】:

您的预检请求似乎被重定向并且未正确处理(您应该在问题中添加预检请求/响应以明确)。我想这是因为您需要对所有请求进行身份验证。我会说 OPTIONS 请求应该以某种方式列入白名单。 这能回答你的问题吗? How to resolve 'preflight is invalid (redirect)' or 'redirect is not allowed for a preflight request' 嗨@JanGaraj 我通过将 Angular 应用程序移动到 API 网关后面来解决它。谢谢 @user585014 你是如何将 Angular 移到 API 网关后面的?你有关于你的项目的 git 吗? 只需在您的 API 路由中添加一个新路由 - id:frontend_route uri:localhost:4200 谓词:- Path=/** 过滤器:- RemoveRequestHeader=Cookie,然后在您的安全配置 .pathMatchers 中添加以下内容("/portal/**").permitAll() 【参考方案1】:

我通过将 Angular App 移到 API 网关后面并在 API 网关和微服务中添加以下代码来解决它

在 API 网关中

http.cors();

在微服务中

@Configuration
@EnableWebMvc
public class RestServiceCorsApplication implements WebMvcConfigurer 
    @Override
    public void addCorsMappings(CorsRegistry registry) 
        registry.addMapping("/**");
    

【讨论】:

我不这么认为。我在 API 网关和微服务中也启用了 cors。【参考方案2】:

HttpMethod.OPTIONS 添加到您的允许方法。使用 OPTIONS 方法向服务器发送预检请求。所以你的配置应该如下所示:

allowedMethods:
        - GET
        - POST
        - DELETE
        - PUT
        - OPTIONS

此外,您的路线必须包含 OPTIONS 方法。例如:

spring.cloud.gateway.routes[0].predicates[1] = Method=GET,POST,OPTIONS

【讨论】:

以上是关于Angular 的 Spring Cloud Gateway Preflight Cors 错误的主要内容,如果未能解决你的问题,请参考以下文章

Keycloak + Spring Cloud Gateway + Angular 9

聊聊spring cloud gateway的NettyConfiguration

1.关于Spring Cloud的一些基本知识

如何使用 Keycloak 保护 Angular 8 前端和使用网关、eureka 的 Java Spring Cloud 微服务后端

Spring Cloud 服务 - 尤里卡

PowerBuilder 2019 GA Universal Edition & GA Cloud Edition & GA Standard Edition