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
如何使用 Keycloak 保护 Angular 8 前端和使用网关、eureka 的 Java Spring Cloud 微服务后端
PowerBuilder 2019 GA Universal Edition & GA Cloud Edition & GA Standard Edition