Spring boot 3 CORS issues with Angular 14

Question

I have a Springboot 3 API which is on production. Whenever i try to do an API request to one of my endpoints, it gives me a CORS error:

Access to XMLHttpRequest at '(API_LINK)' from origin '(Hosted_Front-end)' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome-untrusted, https, edge.

My Springboot 3 code for handling CORS looks as follows:

public class WebMvcConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
    registry.addMapping("/**")
        .allowedOrigins((Here are all my origins, correctly typed in))
        .allowedMethods("*")
        .allowedHeaders("*")
        .allowCredentials(true);
        }
}

@Configuration
@EnableWebSecurity
@RequiredArgsConstructor
public class SecurityConfiguration {

    private final JwtAuthenticationFilter jwtAuthenticationFilter;
    private final AuthenticationProvider authenticationProvider;
    
    @Bean
    public SecurityFilterChain securityFilterChain(HttpSecurity httpSecurity) throws Exception {
        httpSecurity
                .csrf().disable().cors()
                .and()
                    .authorizeHttpRequests()
                    .requestMatchers("/api/v1/auth/**", "/api/v1/products/**")
                    .permitAll()
                    .anyRequest().authenticated()
                .and()
                    .sessionManagement()
                    .sessionCreationPolicy(SessionCreationPolicy.STATELESS)
                .and()
                    .authenticationProvider(authenticationProvider)
                    .addFilterBefore(jwtAuthenticationFilter, UsernamePasswordAuthenticationFilter.class);
    
        return httpSecurity.build();
    }

}

I know this is a CORS issue, because i can use Insomnia to query all of the routes. I tried to allow all traffic to see if that works, but it also failed and gave me a CORS error in return.

This might also be a front-end related issue so here is my Angular HttpInterceptor:

@Injectable()
export class ApiInterceptor implements HttpInterceptor {
    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        const token = Cookies.get('token')

        if (req.url.startsWith('http')) return next.handle(req);
    
        let request = req;
    
        if (token) {
            request = req.clone({
            setHeaders: {
            Authorization: `Bearer ${token}`,
        },
        url: `${environment.apiUrl}${req.url}`,
        withCredentials: true,
        });
      } else {
          request = req.clone({
          url: `${environment.apiUrl}${req.url}`,
          withCredentials: true,
      });
    }
    
       return next.handle(request);

    }
}

I have searched a lot for people having a similar problem, but couldn't find a solution. Right now I'm sure the .cors() in the SecurityFilterChain isn't overwriting my WebMvcConfigurer, because i have removed it to test if it will work.