Angular to Spring Boot Micro services connectivity Error

Question

I am trying to connect from my Angular application to the back end micro-services built on Spring Boot and Spring Cloud. UI calls the microservices layer through Zuul which routes to the respective microservice

I am getting the below error while connecting to microservices from the angular UI in the browser console:

Failed to load: https://microservice url - Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers in preflight response.

Can some one please explain what this error refers to?

Answer 1

I have same problem i implemented the interface Filter

And then allow Access-Control-Allow-Headers and Access-Control-Expose-Headers to added CORS issue

@Component
public class CORSFilter implements Filter{


 @Override
        public void doFilter(ServletRequest request, ServletResponse res, FilterChain chain) throws IOException, ServletException {
            HttpServletResponse response = (HttpServletResponse) res;
            response.setHeader("Access-Control-Allow-Origin", "*");
            response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE, PUT");


            response.setHeader("Access-Control-Allow-Headers", "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");
            response.setHeader("Access-Control-Expose-Headers", "Content-Type, Access-Control-Expose-Headers, Authorization, X-Requested-With");
            chain.doFilter(request, response);
            logger.info(request.getRemoteAddr());
        }

}