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.
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.