spring rest project with client side in angular js - how to approach the rest service with ajax - ajax

Question

So I have a spring rest project that includes client side app.
I can run the service on a local tomcat and get responses querying "http://:8080/books" for example.
I can set app an apache server and go to "http://" to see my client app (the apache htdocs dir points to the project client app dir).
What I can't manage to do is send ajax rest queries to the service.
I'm using angular js so it looks like:
$http.get("http://:8080/books").success(...).error(...);
and it always enters the error callback method.
In the debugger/network tab I see that the request status is "canceled". Looking at the request's details I see next to the "Request headers" title the message: "CAUTION: Provisional headers are shown".
Here is my web.xml:
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
version="3.0">
<display-name>Library Application</display-name>
<context-param>
<param-name>contextClass</param-name>
<param-value>org.springframework.web.context.support.AnnotationConfigWebApplicationContext</param-value>
</context-param>
<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>com.library.application</param-value>
</context-param>
<context-param>
<param-name>spring.profiles.active</param-name>
<param-value>prod</param-value>
</context-param>
<listener>
<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>
<!-- Processes application requests -->
<servlet>
<servlet-name>BooksServlet</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<init-param>
<param-name>contextClass</param-name>
<param-value>org.springframework.web.context.support.AnnotationConfigWebApplicationContext</param-value>
</init-param>
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value>com.library.service.config.ControllerConfig</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>BooksServlet</servlet-name>
<url-pattern>/*</url-pattern>
</servlet-mapping>
</web-app>
My project structure is:
src
main
java
resources
webapp
resources
WEB-INF
test
Is it because the origin is different (mainly the port)?
Should I add some code to my web.xml to serve the client through tomcat? If so how?
thanks.

Answer 1

I guess you have a problem with cross-domain requests(yes, different port is another domain for the browser and it will cancel the request for security purposes if server will not include cross-domain headers). Try to add this headers to your REST response:
responseHeaders.add("Access-Control-Allow-Origin", "*");
if you need cookies you might need this as well:
responseHeaders.add("Access-Control-Allow-Credentials", "true");
in the second case you have to set an origin, '*' will not work in this case
more info here

Answer 2

Angular http uses relative urls.
For example using : www.stackoverflow.com
And
$http.get('/api/search?'
would call : www.stackoverflow.com/api/search
You can tests your rest api using your browser for gets requests, and one of the many plugins for post/put/delete.
(they are jsut made up urls btw)

Answer 3

Found it.
Thanks for all the answers, I was looking for the spring solution.
+1 JohnnyAW for your answer.
In my controller config class I've extended WebMvcConfigurerAdapter and overridden an addResourceHandlers method pointing to my client web app dir:
#Configuration
#EnableWebMvc
#ComponentScan("com.library.service")
public class ControllerConfig extends WebMvcConfigurerAdapter {
#Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/resources/**").addResourceLocations("/resources/");
}
}
Note that it works because configuration is annotated with #EnableWebMvc.