Cross Origin Issues

A web application executes a cross-origin HTTP request when it requests a resource that has a different origin (domain, protocol, or port) from its own.

If you are calling REST API from your Angular or React application then you must be using “fetchAPI” method to invoke the REST API URI hosted on different domain.

In order to allow the cross origin, you need to add your Angular or React URL in your controlled method of REST API as following.

@CrossOrigin(origins = "http://localhost:3000")

Be cautious:- Sometimes, infact most of the time we add "/" at the end as well , which will restrict the call and throw the error

The error we might get is

Access to fetch at ‘http://localhost:8080/users’ from origin ‘http://localhost:3000’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.