Tengo una aplicación web que estoy desarrollando usando Angular 2 y Spring Boot. Uso la dependencia spring-boot-data-rest para exponer mis repositorios como puntos finales HTTP.
Durante el desarrollo, ejecuto mi proyecto backend spring boot en un tomcat local que se ejecuta en el puerto 8080. Para desarrollar la interfaz, uso angular-cli para servir mi aplicación Angular 2 en el puerto 4200. Mi interfaz que se ejecuta en 4200 debe poder para llegar a los puntos finales expuestos en 8080, pero eso no funciona porque:
No hay ningún encabezado 'Access-Control-Allow-Origin' en el recurso solicitado. Por lo tanto, no se permite el acceso al origen ' http://localhost:4200 '.
Si estos fueran puntos finales personalizados que escribí manualmente en un @RestController , simplemente podría agregar la anotación @CrossOrigin como tal:
@RestController public class MyController { @CrossOrigin(origins = "http://localhost:4200") @RequestMapping(value = "/whatever") public void whatever() { //whatever } } Pero obviamente no puedo hacer esto para mis puntos finales expuestos por spring-boot-data-rest . Entonces, ¿cómo puedo hacer que esos puntos finales sean accesibles desde el origen http://localhost:4200 ?
He usado mi filtro CORS personalizado para que funcione:
/** * Filter for enabling CORS support. */ @Component public class CorsFilter extends OncePerRequestFilter { @Override protected void doFilterInternal(final HttpServletRequest request, final HttpServletResponse response, final FilterChain filterChain) throws ServletException, IOException { response.addHeader("Access-Control-Allow-Origin", "*"); response.addHeader("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT, PATCH, HEAD, OPTIONS"); response.addHeader("Access-Control-Allow-Headers", "Origin, Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers"); response.addHeader("Access-Control-Expose-Headers", "Access-Control-Allow-Origin, Access-Control-Allow-Credentials"); response.addHeader("Access-Control-Allow-Credentials", "true"); response.addIntHeader("Access-Control-Max-Age", 10); filterChain.doFilter(request, response); } }Tal vez podría usar el siguiente componente para habilitar la solicitud CORS. Se aplica globalmente a la aplicación.
@Component @Order(Ordered.HIGHEST_PRECEDENCE) public class SimpleCorsFilter implements Filter { public SimpleCorsFilter() { } @Override public void destroy() { } @Override public void doFilter(final ServletRequest req, final ServletResponse res, final FilterChain chain) throws IOException, ServletException { final HttpServletResponse response = (HttpServletResponse) res; final HttpServletRequest request = (HttpServletRequest) req; response.setHeader("Access-Control-Allow-Origin", "*"); response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE"); response.setHeader("Access-Control-Max-Age", "3600"); response.setHeader("Access-Control-Allow-Headers", "x-requested-with, authorization, token"); if ("OPTIONS".equalsIgnoreCase(request.getMethod())) { response.setStatus(HttpServletResponse.SC_OK); } else { chain.doFilter(req, res); } } @Override public void init(final FilterConfig filterConfig) { } }