I read the information I found on this site and others. I thought it would be simple, but the TypeError: Failed to fetch error persists in various scenarios. I am describing the situation and hope someone can point out my mistake.

My project is a Spring Boot application (it’s for educational purposes). The main part of the project is deployed on port 8080. HTML pages are also within this project. The page has two sections: subscription change and personal data change. There are no errors on the frontend when changing personal data, as the requests from the frontend go to controllers on port 8080.

However, when changing a subscription, the request from the frontend is sent to the subscription change controller on port 8080, which in turn calls the payment controller (also on port 8080). The payment controller sends data to a mock banking server running on port 8081. The subscription changes as expected, but the response does not return to the frontend, and instead, the TypeError: Failed to fetch error appears.

I have configured CORS settings on both ports 8080 and 8081 (together and separately), and I have added annotations to controllers on all ports, both together and separately. I have also modified my WebSecurityConfig settings. Despite all these attempts, the issue remains unresolved.

I have reverted all my changes to the initial state (before the error appeared). Currently, the only place where CORS is mentioned in my code is in my WebSecurityConfig. Of course, when attempting to add WebMvcConfigurer in WebSecurityConfig, .cors().disable() was either enabled or absent. I tried different options, but the issue was not resolved.

I hope for your help and explanation, specifically for my case.

@Configuration
@RequiredArgsConstructor
@EnableWebSecurity
@Slf4j
public class WebSecurityConfig {
    private final JWTTokenConfig jwtTokenConfig;

    @Bean
    public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
        http.csrf().disable()
                .cors().disable()
                .authorizeRequests(authorize -> authorize
                        .antMatchers("/register","/host_page", "/login", "/music_files").permitAll()
                        .antMatchers("/static/**","/images/background.jpg").permitAll()
                        .antMatchers("/swagger-ui/**", "/swagger-resources/*", "/v3/api-docs/**", "/swagger-ui.html").permitAll()
                        .antMatchers("/personal_office/**").authenticated()
                        .antMatchers(HttpMethod.GET, "/main").permitAll()
                        .antMatchers("/free_subscription").hasAnyRole("FREE", "OPTIMAL", "MAXIMUM", "ADMIN")
                        .antMatchers("/optimal_subscription").hasAnyRole("MAXIMUM", "OPTIMAL", "ADMIN")
                        .antMatchers("/maximum_subscription").hasAnyRole("MAXIMUM", "ADMIN")
                        .antMatchers("/admin_office/**", "/users").hasRole("ADMIN")
                        .anyRequest().authenticated()
                )
                .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS)
                .and()
                .addFilterBefore((Filter) jwtTokenConfig, UsernamePasswordAuthenticationFilter.class);
        return http.build();
    }

    @Bean
    public WebSecurityCustomizer webSecurityCustomizer() {
        return (web) -> web.ignoring().antMatchers("/static/**", "/styles/**", "/images/**", "/js/**");
    }
}

If needed, I can provide the rest of the code, but I believe the problem lies specifically with the CORS configuration settings and possibly with WebSecurityConfig.