[SOLVED] CORS strict-origin-when-cross-origin

I seem to be running into some issues with my CORS configurations. I am using Keycloak for my authentication. All of my endpoints are redirected to a login page, with an error 302 (Found). When I checked the request in network I saw that I get "strict-origin-when-cross-origin" as a referrer policy. I have put my SecurityConfig in my API Gateway, and have ensured I am using the correct endpoint, but it still seems to be throwing this error. Can someone give me a hint what could I have configured wrong? Thank you! :)

Access to XMLHttpRequest at 'http://localhost:8078/api-category/getAll' from origin 'http://localhost:5173' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. homepage.tsx:42

AxiosError {message: 'Network Error', name: 'AxiosError', code: 'ERR_NETWORK', config: {…}, request: XMLHttpRequest, …} (anonymous) @ homepage.tsx:42 Promise.catch (anonymous) @ homepage.tsx:42 react-stack-bottom-frame @ react-dom_client.js?v=6e2d2c08:16242 runWithFiberInDEV @ react-dom_client.js?v=6e2d2c08:726 commitHookEffectListMount @ react-dom_client.js?v=6e2d2c08:7767 commitHookPassiveMountEffects @ react-dom_client.js?v=6e2d2c08:7825 commitPassiveMountOnFiber @ react-dom_client.js?v=6e2d2c08:9182 recursivelyTraversePassiveMountEffects @ react-dom_client.js?v=6e2d2c08:9163 commitPassiveMountOnFiber @ react-dom_client.js?v=6e2d2c08:9265 recursivelyTraversePassiveMountEffects @ react-dom_client.js?v=6e2d2c08:9163 commitPassiveMountOnFiber @ react-dom_client.js?v=6e2d2c08:9176 recursivelyTraversePassiveMountEffects @ react-dom_client.js?v=6e2d2c08:9163 commitPassiveMountOnFiber @ react-dom_client.js?v=6e2d2c08:9176 recursivelyTraversePassiveMountEffects @ react-dom_client.js?v=6e2d2c08:9163 commitPassiveMountOnFiber @ react-dom_client.js?v=6e2d2c08:9265 recursivelyTraversePassiveMountEffects @ react-dom_client.js?v=6e2d2c08:9163 commitPassiveMountOnFiber @ react-dom_client.js?v=6e2d2c08:9265 recursivelyTraversePassiveMountEffects @ react-dom_client.js?v=6e2d2c08:9163 commitPassiveMountOnFiber @ react-dom_client.js?v=6e2d2c08:9176 recursivelyTraversePassiveMountEffects @ react-dom_client.js?v=6e2d2c08:9163 commitPassiveMountOnFiber @ react-dom_client.js?v=6e2d2c08:9176 recursivelyTraversePassiveMountEffects @ react-dom_client.js?v=6e2d2c08:9163 commitPassiveMountOnFiber @ react-dom_client.js?v=6e2d2c08:9176 recursivelyTraversePassiveMountEffects @ react-dom_client.js?v=6e2d2c08:9163 commitPassiveMountOnFiber @ react-dom_client.js?v=6e2d2c08:9265 recursivelyTraversePassiveMountEffects @ react-dom_client.js?v=6e2d2c08:9163 commitPassiveMountOnFiber @ react-dom_client.js?v=6e2d2c08:9176 recursivelyTraversePassiveMountEffects @ react-dom_client.js?v=6e2d2c08:9163 commitPassiveMountOnFiber @ react-dom_client.js?v=6e2d2c08:9265 recursivelyTraversePassiveMountEffects @ react-dom_client.js?v=6e2d2c08:9163 commitPassiveMountOnFiber @ react-dom_client.js?v=6e2d2c08:9186 flushPassiveEffects @ react-dom_client.js?v=6e2d2c08:11119 performSyncWorkOnRoot @ react-dom_client.js?v=6e2d2c08:11445 flushSyncWorkAcrossRoots_impl @ react-dom_client.js?v=6e2d2c08:11356 commitRootImpl @ react-dom_client.js?v=6e2d2c08:11073 commitRoot @ react-dom_client.js?v=6e2d2c08:10989 commitRootWhenReady @ react-dom_client.js?v=6e2d2c08:10477 performWorkOnRoot @ react-dom_client.js?v=6e2d2c08:10421 performWorkOnRootViaSchedulerTask @ react-dom_client.js?v=6e2d2c08:11436 performWorkUntilDeadline @ react-dom_client.js?v=6e2d2c08:35 CategoryService.tsx:14

GET http://localhost:8078/api-category/getAll net::ERR_FAILED 302 (Found)Error fetching the categories:


@EnableWebFluxSecurity
@EnableMethodSecurity(jsr250Enabled = true)
@Configuration
public class SecurityConfig {

    @Bean
    public SecurityWebFilterChain securityWebFilterChain(ServerHttpSecurity http) {
        return http
                .csrf(ServerHttpSecurity.CsrfSpec::disable)
                .cors(cors -> cors.configurationSource(corsConfigurationSource()))
                .authorizeExchange(exchanges -> exchanges
                        .pathMatchers(HttpMethod.OPTIONS, "/**").permitAll()
                        .pathMatchers(HttpMethod.GET, "/category-service/category/getAll").permitAll()
                        .anyExchange().authenticated()
                )
                .exceptionHandling(handling -> handling
                        .authenticationEntryPoint((exchange, ex) ->
                                Mono.fromRunnable(() -> {
                                    exchange.getResponse().setStatusCode(HttpStatus.UNAUTHORIZED);
                                })
                        )
                )
                .build();
    }

    @Bean
    public UrlBasedCorsConfigurationSource corsConfigurationSource() {
        CorsConfiguration corsConfig = new CorsConfiguration();
        corsConfig.setAllowedOrigins(List.of("http://localhost:5173"));
        corsConfig.setAllowedMethods(List.of("GET", "POST", "OPTIONS"));
        corsConfig.setAllowedHeaders(List.of("Origin", "Content-Type", "Accept", "Authorization"));
        corsConfig.setAllowCredentials(true);

        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", corsConfig);
        return source;
    }
}

As you can see in the UrlBasedCorsConfigurationSource, I have allowed all methods of localhost:5173, but it still does not work.

Keycloak Config


const keycloak = new Keycloak({
  
  url: "http://localhost:8080/",
  realm: "pibble-tv",
  clientId: "pibbletv-frontend",

});