5

I have a web application that I am developing using Angular 2 and Spring Boot. I use the spring-boot-data-rest dependency to expose my repositories as HTTP endpoints.

During development, I run my backend spring boot project on a local tomcat that runs on port 8080. To develop the frontend, I use the angular-cli to serve my Angular 2 application on port 4200. My frontend running on 4200 needs to be able to hit the endpoints exposed on 8080, but that doesn't work because:

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access.

If these were custom endpoints that I manually typed in a @RestController, I could simply add the @CrossOrigin annotation as such:

@RestController
public class MyController {
    @CrossOrigin(origins = "http://localhost:4200")
    @RequestMapping(value = "/whatever")
    public void whatever() {
        //whatever
    }
}

But I obviously cannot do this for my endpoints exposed by spring-boot-data-rest. So, how can I make those endpoints accessible from the http://localhost:4200 origin?

Andrew Mairose
  • 10,615
  • 12
  • 60
  • 102
  • 1
    I've recently faced with the issue; if you are using the latest version of Spring Data, everything is going be good (http://stackoverflow.com/a/42403956/4922375), otherwise, you have to write a filter by your own which sets some headers to each response. – Andrew Tobilko Mar 07 '17 at 16:10

2 Answers2

7

I've used my custom CORS filter to make it work:

/**
 * 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);
    }
}
yyunikov
  • 5,719
  • 2
  • 43
  • 78
0

Maybe you could use the following component to enable CORS request. It is applied globally to the application

@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) {
  }
}
Jiujiu
  • 180
  • 11