Access to XMLHttpRequest at '' from origin '' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present

Question

I went through this article link . Its related to node js. I am currently using Spring boot to create restful web service, react js to build front end.

In the solution it is mentioned that to add the following HTTP header to the response: Access-Control-Allow-Headers: Content-Type

I am also providing my front end code, can anyone please suggest me how to add this header to my response? How to solve this problem?

 TodoDataService.retrieveAllTodo(username)
            .then(
                response=>{
                    console.log(response)
                    this.setState({todos:response.data})
                }
            )

class TodoDataService{

    retrieveAllTodo(name) {
        return axios.get(`${API_URL}/users/${name}/todos`);
    }
}

Answer 1

CORS policy is a security configuration provided by your browser, which means it can be handled different on any other browser. Basically what it means is that your browser is expecting an instruction coming from your Website about how to handle requests for resources that live outside of the server/domain that hosts your Website.

To set this header in your backend using HttpServletResponse:

@GetMapping("/http-servlet-response")
public String usingHttpServletResponse(HttpServletResponse response) {
    response.addHeader("Access-Control-Allow-Origin", "https://yourDomainHere.com");
    return "This is the response with the new header";
}

Another option using ResponseEntity:

@GetMapping("/response-entity-builder-with-http-headers")
public ResponseEntity<String> usingResponseEntityBuilderAndHttpHeaders() {
    HttpHeaders responseHeaders = new HttpHeaders();
    responseHeaders.set("Access-Control-Allow-Origin", "https://yourDomainHere.com");

    return ResponseEntity.ok()
      .headers(responseHeaders)
      .body("Response with header using ResponseEntity");
}

You need to change the "yourDomainHere.com" to the actual domain that your XMLHttpRequest is failing to load from.

Here is another approach. Modern browsers that implement CORS policies, will try to investigate if the AJAX call is allowed or not by placing an additional HTTP request to the domain of the AJAX request you are trying to access. This preflight request will be sent using the OPTIONS verb as follows:

OPTIONS /
Host: yourDomainHere.com   'you are going to'
Origin: http://www.yourWebsiteOriginalDomain.com  'you are going from'
Access-Control-Request-Method: PUT   'Any verb your XMLHttpRequest intends to use'

This allows you to configure a mapping in your backend to handle an OPTIONS call and respond with something similar using the following custom HTTP headers:

Access-Control-Allow-Origin: http://www.yourWebsiteOriginalDomain.com  'you are going from'
Access-Control-Allow-Methods: PUT, DELETE   'verbs that you allow'

Answer 2

It's an error probably originating in your browser. If you are using Chrome, have to tried to use an extension to unblock CORS, like "Cors unblock" or anything similar?