Browser default basic authentication spring-boot angular

I know there are a lot of topics about Angular and basic authentication out there and I read most of them, but none applies to my desired behavior.

I have 2 use-cases for my application:

1. The frontend is packaged in the spring-boot backend as static resource
2. The frontend runs separately on e.g. on localhost:4200 and backend on localhost:8080

My security configuration is the following:

@Override
protected void configure(HttpSecurity http) throws Exception {
    http.cors()
            .and().csrf().disable()
                .httpBasic().authenticationEntryPoint(authEntryPoint)
            .and()
                .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS)
            .and()
                .authorizeRequests()
                    .accessDecisionManager(accessDecisionManager)
                    .expressionHandler(expressionHandler)
                    .antMatchers("/api/**").authenticated()
            .and()
                .logout().logoutSuccessHandler(new HttpStatusReturningLogoutSuccessHandler())
            .and()
                .addFilterAfter(jwtTokenFilter, BasicAuthenticationFilter.class);
}

In the first scenario when both frontend and backend are served on the same port and I navigate to http://localhost:8080/context-path I get the browsers basic authentication mask.

But when I go to the seperate running frontend on http://localhost:4200, I only get the 401 - not authenticated an no basic authentication window is popping up.

So my questions is how can I get this popup when frontend and backend are running on different ports/urls? Or is this impossible?