Unable to get correct exception message Angular + spring boot

Question

I have an application written in Angular 8 and APIs in spring boot ..

When I am calling the APIs from HttpClient in Angular, the API is returning the response correctly however if there is any exception during the API call , the angular is not able to get the correct exception message .. However, when I am calling the same API from postman, I am able to get the correct exception message ..

Expected exception message ( as received in postman ):

{
    "timestamp": "2022-03-24T19:00:45.910+0000",
    "status": 500,
    "error": "Internal Server Error",
    "message": "Resource not in ready state",
    "path": "/v1/app/rest/api/url"
    }

Unexpected Exception message received in angular:

{
  "headers": {
    "normalizedNames": {},
    "lazyUpdate": null,
    "headers": {}
  },
  "status": 0,
  "statusText": "Unknown Error",
  "url": "/v1/app/rest/api/url",
  "ok": false,
  "name": "HttpErrorResponse",
  "message": "Http failure response for /v1/app/rest/api/url: 0 Unknown Error",
  "error": {
    "isTrusted": true
  }
}

I am also seeing this message in the console when any exception happens

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://fakeurl.com/v1/app/rest/api/url. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 500.

However, this message is thrown in console only when there is an exception

I have already added the Cors setting

CorsConfiguration config = new CorsConfiguration();
        config.setAllowCredentials(true);
        config.addAllowedOrigin("*");
        config.addAllowedHeader("*");
        config.addAllowedMethod("OPTIONS");
        config.addAllowedMethod("HEAD");
        config.addAllowedMethod("GET");
        config.addAllowedMethod("PUT");
        config.addAllowedMethod("POST");
        config.addAllowedMethod("DELETE");
        config.addAllowedMethod("PATCH");

Angular code

this.subscription = this.myService.myApi()
    .subscribe(
      (response) =>{

         console.log(response)
      },
      (error) =>{
        console.log(error)

      }
    );

CORS configuration in project

import org.springframework.context.annotation.Configuration;
import org.springframework.security.config.annotation.web.builders.WebSecurity;
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;

@Configuration
public class ApplicationSecurity extends WebSecurityConfigurerAdapter {
    @Override
    public void configure(WebSecurity web) throws Exception {
        web.ignoring().antMatchers("/**");
    }
}

import org.springframework.boot.web.servlet.FilterRegistrationBean;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;


@Configuration
public class CorsWebConfiguration {
    
    @Bean
    public FilterRegistrationBean<CorsFilter> corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration config = new CorsConfiguration();
        config.setAllowCredentials(true);
        config.addAllowedOrigin("*");
        config.addAllowedHeader("*");
        config.addAllowedMethod("OPTIONS");
        config.addAllowedMethod("HEAD");
        config.addAllowedMethod("GET");
        config.addAllowedMethod("PUT");
        config.addAllowedMethod("POST");
        config.addAllowedMethod("DELETE");
        config.addAllowedMethod("PATCH");
        source.registerCorsConfiguration("/**", config);
        final FilterRegistrationBean<CorsFilter> bean = new FilterRegistrationBean<CorsFilter>(new CorsFilter(source));
        bean.setOrder(0);
        return bean;
    }
}

Answer 1

This is not a matter of interpreting the response message on the Angular side. It is totally related your CORS configuration. Might you not annotated as "Bean" the method includes your CORS configuration or not annotated as "Configuration" the class which includes your CORS configuration? Can you share all code of your class which includes CORS configuration?

You should have this kind of piece of code in your project to handle CORS problem.

@EnableWebSecurity
@Configuration
@EnableGlobalMethodSecurity(prePostEnabled = true)
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {

@Override
  protected void configure(HttpSecurity httpSecurity) throws Exception {
    httpSecurity.cors().configurationSource(request -> {
      var cors = new CorsConfiguration();
      cors.setAllowedOrigins(List.of("http://localhost:4200", "http://127.0.0.1:80", "http://example.com"));
      cors.setAllowedMethods(List.of("GET","POST", "PUT", "DELETE", "OPTIONS"));
      cors.setAllowedHeaders(List.of("*"));
      return cors;
    }).and()...

--EDIT--

I have added useful link. How to configure CORS in a Spring Boot + Spring Security application?