Cross Site Requests With GWT, RestyGWT and HTML5 CORS

i’m working on a gwt project that can be added to any web site to load a banner and to do that, i had to make some requests to a rest service deployed on another server.

we all know that this is impossible because cross site requests are forbidden, but with the introduction of cors in html5 this can be done (check http://www.html5rocks.com/en/tutorials/cors/ for more details), on this article i’m going to show how to make cors requests to a rest services with restygwt and gwtp for testing i used jersey as rest service provider (this can be any other framework : resteasy, rails…).

first of all, in all modern browsers today, when you execute a cross site request they automatically send a cors request (or a preflight request with the value option in the header), your backend service should respond to this with an empty response containing some required headers to allow the cors (we can compare this step to the handshake in tcp), after receiving the correct response the browser will execute the actual request you want to send.

enabling cors on the back end :

to enable cors on my jax-rs rest service, i added a preflight response for each rest method, the response contain the required headers to authorize the request, i also added the same headers to the final response.

@path("/mydata")
@consumes(mediatype.application_json)
@produces(mediatype.application_json)

public class myrestservice {
  @context
  private httpservletresponse response;

  @inject
  private final mydao mydao;

  @options
  @path("/{id}") //the response for the preflight request made implicitly by the bowser
  public response getbyidpreflight() {
    return response.ok()
      .header("access-control-allow-origin", "*")
      .header("access-control-allow-methods", "post, get, update, options")
      .header("access-control-allow-headers", "x-http-method-override").build();
  }

  @get
  @path("/{id}")
  public mydata getbyid(@pathparam("id") long id) {
    response.addheader("access-control-allow-origin", "*");
    response.addheader("access-control-allow-methods", "post, get, update, options");
    response.addheader("access-control-allow-headers", "x-http-method-override");

    mydata data = mydao.get(id);
    return data;
  }
}

you can also use a third party library to enable cors on your java back end like for example : http://software.dzhuvinov.com/cors-filter.html .

doing a cors request from restygwt :

restygwt is a rich rest client api for gwt, it is based upon the jax-rs annotation, for the given service in the back end, we have to write an interface containing all method we want to call on server (if you are not familiar with restygwt please visit : http://goo.gl/mkw6l ).

public interface mydataservice extends restservice {
  @get
  @path("/promotions/{id}")
  @consumes(mediatype.application_json)
  public void getbyid(@pathparam("id") long id, methodcallback<mydata> callback);
}

to bind and configure this interface service to the actual service on the back end, i register it as a singleton bean on my gin module.

public class clientmodule extends abstractpresentermodule {
  @override
  protected void configure() {
    install(new defaultmodule(clientplacemanager.class));
    bindconstant().annotatedwith(names.named("rest")).to("http://myremoteapp.com/services");
  }

  @provides
  @singleton
  @inject
  public mydataservice providemydataservice(@named("rest") string url) {
    mydataservice mydataservice = gwt.create(mydataservice.class);
    resource resource = new resource(url);
    ((restserviceproxy) mydataservice).setresource(resource);
    return mydataservice;
  }
}

and finally, to use this service you just need to inject it in your presenter and use it normally. that’s it for this article