ClientAbortException when executing angular 2 post in tomcat - tomcat7

Question

After completing the quickstart of angular 2 app i tried to execute a post to a rest web service deployed in another server, which is tomcat.
I have added an OPTIONS method to allow all origins. After returning from the getOptions() method it enters the getTestResponse method and a
ClientAbortException occurs.
Sample code :
return this._http.post(url, body, options)
.map(res => res.json());
Web service code :
#OPTIONS
#Path("samplePath")
public Response getOptions() {
return Response.ok()
.header("Access-Control-Allow-Origin", "*")
.header("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE, PUT")
.header("Access-Control-Allow-Headers", "X-Requested-With, Content-Type, Origin, Authorization, Accept, Client-Security-Token, Accept-Encoding")
.build();
}
#POST
#Consumes({MediaType.APPLICATION_JSON})
#Produces({MediaType.APPLICATION_JSON})
public TestResponse getTestResponse(TestRequest testRequest) {
//somehow get response from database
//
}
Do you have any idea why this exception could occur?

Answer 1

It's because here you add headers just to your option request.
But actually POST is failing.
To fix issue, best is to add a CORS filter to your application which will be applied to all requests.
CorsFilterApi
import org.jboss.resteasy.plugins.interceptors.CorsFilter;
#ApplicationPath(RestApplication.ROOT_PATH)
public class RestApplication extends Application {
public static final String ROOT_PATH = "/resources";
private Set<Object> singletons = new HashSet<>();
...
#Override
public Set<Object> getSingletons() {
CorsFilter corsFilter = new CorsFilter();
corsFilter.getAllowedOrigins().add("*");
corsFilter.setAllowCredentials(true);
corsFilter.setAllowedHeaders("origin, content-type, accept, authorization");
corsFilter.setAllowedMethods("GET, POST, DELETE, PUT, OPTIONS, HEAD");
singletons.add(corsFilter);
return singletons;
}
}
EDIT:
Solution 2 apply headers just to your post request and
make sure that your #OPTION REQUEST IS NOT CONTAINING #PATH
because then it's not same request in your case:
#OPTIONS
public Response getOptions() {
return Response.ok()
.header("Access-Control-Allow-Origin", "*")
.header("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE, PUT")
.header("Access-Control-Allow-Headers", "X-Requested-With, Content-Type, Origin, Authorization, Accept, Client-Security-Token, Accept-Encoding")
.build();
}
#POST
#Consumes({MediaType.APPLICATION_JSON})
#Produces({MediaType.APPLICATION_JSON})
public Response getTestResponse(TestRequest testRequest) {
return Response.ok()
.header("Access-Control-Allow-Origin", "*")
.header("Access-Control-Allow-Headers", "origin, content-type, accept, authorization")
.header("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT, OPTIONS").build();
}