Access to XMLHttpRequest at 'http://localhost:8080 from origin 'http://localhost:4200' has been blocked by CORS policy

Question

This is the method from my component:

onDelete(s) {
    const conf = confirm('etes vous sur');
    if (conf) {
         console.log(s._links.self.href);
      this.catservice.Deleteprod(s._links.self.href).subscribe(data => {console.log(s._links.self.href);
      }, error1 => {
        console.log(error1);
      });
    }
  }

and this the method from my service:

  public Deleteprod(url) {
    return this.httpClient.delete(url);
  }

I want to delete this object with s._links.self.href so the url is not wrong but I have this problem when I try to make class websecurityconfig with her methods I tried with @CrossOrigin(origins = "*") but there is no solution please help me.

This is my error:

Access to XMLHttpRequest at 'http://localhost:8080/offres/24' 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.

Answer 1

Add the Following annotation below your @RestController Annotation

@CrossOrigin(origins = "*", allowedHeaders = "*")