Angular application is not rendering the data from Spring Boot API deployed in Google Kubernetes Engine

4/15/2021

I have one wired error,

I have Angular application running in my local machine. I have Spring Boot Application pod running in Google Kubernetes Engine.

Every End point works fine other than one end point.

Error logs:

Angular is running in development mode. Call enableProdMode() to enable production mode.
add-sales:1 Access to XMLHttpRequest at 'http://34.72.237.38:8080/vehicles/2' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
add-sales.component.ts:63 Error in getting the single vehicle :  
HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: "http://34.72.237.38:8080/vehicles/2", ok: false, }
error: ProgressEvent {isTrusted: true, lengthComputable: false, loaded: 0, total: 0, type: "error", }
headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, headers: Map(0)}
message: "Http failure response for http://34.72.237.38:8080/vehicles/2: 0 Unknown Error"
name: "HttpErrorResponse"
ok: false
status: 0
statusText: "Unknown Error"
url: "http://34.72.237.38:8080/vehicles/2"
__proto__: HttpResponseBase

When I hit the above URL in the browser, the data is rendering in the JSON format. I don't know why it is not rending in the Component.ts file when I call this service from service class.

Service Class

@Injectable({
  providedIn: 'root'
})
export class VehicleDetailsService {

  vehicleDetails : VehicleDetails;

  
  
  url="http://34.72.237.38:8080";
  // url = "http://localhost:8080";

  constructor(private http: HttpClient) { }



  getVehicleDetails(id : number){
    return this.http.get<VehicleDetails>(this.url+`/vehicle/${id}/vehicleDetail`);
  }
}

Component Class:

getSingleVehicle(){
    return this.vehicle_service.getSingleVehicles(this.vehicleID)
      .subscribe(res => {
        this.vehicle = res;
        console.log("Response for single vehicle : ",this.vehicle);
      },
      err=>{
        console.log("Error in getting the single vehicle : ",err);
      })
    }

Spring Boot Controller Class

@RestController
@CrossOrigin
public class VehicleController {
	
	@Autowired
	public VehicleService vehService;
	
	@GetMapping("/vehicles/{id}")
	public Optional<Vehicle> getVehicleById(@PathVariable Long id) {
		return vehService.getSingleVehicle(id);
	}

}

It's my spring security configuration:

@Override
	protected void configure(HttpSecurity http) throws Exception {
		
		http.authorizeRequests().antMatchers("/").permitAll().and()
        .authorizeRequests().antMatchers("/console/**").permitAll();
	http.csrf().disable();
	http.headers().frameOptions().disable();

Here I am allowing all Urls, but I am still not able to rend the data in angular.

-- Pent Terry
angular
java
kubernetes
spring-boot

1 Answer

4/15/2021

The error message shows no cross origin requests are allowed from your local development machine (localhost:4200) to the deployed application. Since you have a @CrossOrigin annotation present on the controller as shown in your question there must be a different kind of problem. Hypothesis: You did not build and deploy a new version of the app after adding the @CrossOrigin. Another option could be a reverse proxy that filters CORS headers.

-- Thomas
Source: StackOverflow