Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present

Question

I Am not able to fetch data from Rest Server.Following Error is coming: "Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' http://localhost:8080 ' is therefore not allowed access."

Response is coming as "0", This is not hitting the Rest Method also.

Rest APT:

@POST
    @Timed
    @Path("updateScore")
    @Consumes(MediaType.APPLICATION_JSON)
    @Produces(MediaType.APPLICATION_JSON)
    public Response updateScore(Player player)
    {
    StringBuilder returnStr = new StringBuilder("Sucess");
    return Response.ok().
            header("Access-Control-Allow-Origin", "http://localhost:8080").
            header("Access-Control-Allow-Methods",  "GET, POST, PATCH, PUT, DELETE, OPTIONS").
            header("Access-Control-Allow-Headers", "Origin, Content-Type, X-Auth-Token").
            allow("OPTIONS").
            status(200).
            entity("Hello").build();
}

JavaScript Call

    var url = "http://192.168.0.101:9090/api/FGame/updateScore/";
            var client = new XMLHttpRequest();
            client.open('POST', url, true);
            client.setRequestHeader('Content-Type', 'application/json');
            client.send('{"Name" : 12}');
            client.onreadystatechange = function() {
                   alert(client.status);
                   alert(client.data)
            };

But if I am changing to JavaScript call as following then working fine. JavaScript Call

    var url = "http://192.168.0.101:9090/api/FGame/updateScore/";
            var client = new XMLHttpRequest();
            client.open('POST', url, true);
            client.send(null);
            client.onreadystatechange = function() {
                   alert(client.status);
                   alert(client.data)
            };

Answer 1

In my scenario I am using an angular front-end Api to collect the data from a form object and a Java rest Api to write the data to a MySql database. But I was always having the "Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource." error in the browser console. None of the suggested header modifications in the frontend like;

const headers: {
  'Access-Control-Allow-Origin' : '*',
};

worked for me.

After hours of research in the internet one of my friends showed me the answer in not in the frontend but in the backend. Adding a WebConfig class to my java code fixed my problem.

@EnableWebMvc
@Configuration
public class WebConfig implements WebMvcConfigurer {

 @Override
 public void addCorsMappings(CorsRegistry registry) {
    registry.addMapping("/**")
            .allowedOrigins("http://localhost:3000/", "http://localhost:4200/")
            .allowedMethods("*")
            .allowedHeaders("*");
 }
}

Hope this finds those who is looking for an answer to the same error.