spring rest project with client side in angular js - how to approach the rest service with 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.

Note that Tomcat is also an apache project, are you saying you're running Apache webserver and Apache tomcat both? — Philipp Gayret
– Philipp Gayret, Commented Jun 16, 2014 at 12:35

JohnnyAW · Accepted Answer · 2014-06-16 12:33:17Z

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

answered Jun 16, 2014 at 12:33

JohnnyAW

2,8761 gold badge19 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

NimChimpsky · Accepted Answer · 2014-06-16 12:27:23Z

0

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)

answered Jun 16, 2014 at 12:27

NimChimpsky

47.5k61 gold badges202 silver badges319 bronze badges

Comments

Queequeg · Accepted Answer · 2014-06-17 15:54:34Z

0

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.

answered Jun 17, 2014 at 15:54

Queequeg

9457 silver badges11 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related