Cross-Origin Resource Sharing (CORS) is a technique that makes use of additional HTTP headers to tell browsers to give a web application running at one origin, access to selected resources from a different origin. CORS or Cross Origin Resource Sharing is blocked in modern browsers by default (in JavaScript APIs).

The Access-Control-Allow-Origin response header indicates whether the response can be shared with requesting code from the given origin.

A returned resource may have one Access-Control-Allow-Origin header, with the following syntax:

Access-Control-Allow-Origin: *
Access-Control-Allow-Origin: <origin>
Access-Control-Allow-Origin: null

For requests that doesn’t use credentials, literal value “*” can be specified, as a wildcard; this value tells browsers to allow requesting code from any origin to access the resource.

How to fix CORS error?

In the simplest scenario, cross-origin request-response starts with a client making a GET, POST, or HEAD request against a resource on the server. To fix CORS error, you need to manually set the Access-Control-Allow-Origin to a value.

The server will consider the request’s Origin and either allow or disallow the request. If the server allows the request, then it will respond with the requested resource and an Access-Control-Allow-Origin header in the response. This header will indicate to the client which client origins will be allowed to access the resource. Assuming that the Access-Control-Allow-Origin header matches the request’s Origin, the browser will allow the request. On the other hand, if Access-Control-Allow-Origin is missing in the response or if it doesn’t match the request’s Origin, the browser will disallow the request.

Fixing CORS error in Spring Boot applications

In Spring / Spring Boot, you can just set it as false on top of Controller to allow CORS as shown below.

@CrossOrigin(origins= {"*"}, maxAge = 2400, allowCredentials = "false" )
   @RestController
   @RequestMapping("/")
   public class XYZ {
       
  }

Another way to do this is to create a simple CORS filter to allow every type pf CORS, this can be done as shown below.

 @Override
       public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {

        HttpServletRequest request = (HttpServletRequest) req;
        HttpServletResponse response = (HttpServletResponse) res;

        response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "Content-Type, Accept, X-Requested-With, remember-me");

        chain.doFilter(req, res);
    }

Fixing CORS error in Node Js application

You can add the following lines in app.js.

 app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization");
  res.header("Access-Control-Allow-Methods", "GET, PUT, POST, DELETE");    
  next();
});