Webapp with GWT on my own server and in the GAE database

Question

I created a simple web application with GWT + GAE with a Java backend (pretty much similar to the drive example in the tutorial: http://www.gwtproject.org/doc/latest/tutorial/clientserver.html ). It works great when servicing a .appspot.com domain.

I would like to be able to serve part of the client (GWT) from another server (the local web server on my PC) and still use GAE as a backend. How can I do that?

Attempt to solve

I understand that this adds to the implementation of the Ajax cross server, I did not find much information on how to do this, so I continued trial and error; here is what i did:

The client application is called myapp_web , the server side is called myapp.

I copied the GWT part to my local server in the directory / webapps / myapp_web ; It is loaded perfectly. I got a 404 error on / webapps / myapp_web / myapp , so I realized that this is the URL where the application is trying to find the backend.

I found in http://developer.yahoo.com/javascript/howto-proxy.html an example PHP script that should serve as a proxy server that allows a cross server:

<?php // PHP Proxy example for Yahoo! Web services. // Responds to both HTTP GET and POST requests // // Author: Jason Levitt // December 7th, 2005 // // Allowed hostname (api.local and api.travel are also possible here) define ('HOSTNAME', 'http://search.yahooapis.com/'); // Get the REST call path from the AJAX application // Is it a POST or a GET? $path = ($_POST['yws_path']) ? $_POST['yws_path'] : $_GET['yws_path']; $url = HOSTNAME.$path; // Open the Curl session $session = curl_init($url); // If it a POST, put the POST data in the body if ($_POST['yws_path']) { $postvars = ''; while ($element = current($_POST)) { $postvars .= urlencode(key($_POST)).'='.urlencode($element).'&'; next($_POST); } curl_setopt ($session, CURLOPT_POST, true); curl_setopt ($session, CURLOPT_POSTFIELDS, $postvars); } // Don't return HTTP headers. Do return the contents of the call curl_setopt($session, CURLOPT_HEADER, false); curl_setopt($session, CURLOPT_RETURNTRANSFER, true); // Make the call $xml = curl_exec($session); // The web service returns XML. Set the Content-Type appropriately header("Content-Type: text/xml"); echo $xml; curl_close($session); ?> 

I copied this script to / webapps / myapp_web / myapp, the myapp file, without the extension, and I got Apache to handle it as php. I changed the HOSTNAME variable from http://search.yahooapis.com/ to <a3> .

Now I get 500 server errors and I am stuck not knowing how to debug this. Thanks for any help you can provide.

Answer 1

As you say in your question, there are two options for resolving this issue:

• The first option is to properly configure the server side (GAE application) for the correct processing of resource sharing between different sources ( CORS ). This only works with browser support. Most browsers currently include IE10. IE8 / 9 needs a different approach XDomainRequest
• And the second is to use a server-side proxy like the one you tried. But you must create a request server that adds the X-GWT-Permutation coming from your client. Otherwise, the gwt servlets will raise a SecurityException , causing a 500 response.

Said that I would suggest the CORS option because its simplicity is lightweight and that would be the standard way.

To configure CORS, you just need to configure the filter in your web application.

Adding these lines to the web.xml :

 <filter> <filter-name>CORSFilter</filter-name> <filter-class>my.namespace.CORSFilter</filter-class> </filter> <filter-mapping> <filter-name>CORSFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> 

And encoding a servlet filter to handle requests and responses with appropriate headers.

Here you have an example that I wrote a while ago for the gwt-query ajax wiki .

  public class CORSFilter implements Filter { // For security reasons set this regex to an appropriate value // example: ".*example\\.com" private static final String ALLOWED_DOMAINS_REGEXP = ".*"; public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException { HttpServletRequest req = (HttpServletRequest) servletRequest; HttpServletResponse resp = (HttpServletResponse) servletResponse; String origin = req.getHeader("Origin"); if (origin != null && origin.matches(ALLOWED_DOMAINS_REGEXP)) { resp.addHeader("Access-Control-Allow-Origin", origin); if ("options".equalsIgnoreCase(req.getMethod())) { resp.setHeader("Allow", "GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS"); if (origin != null) { String headers = req.getHeader("Access-Control-Request-Headers"); String method = req.getHeader("Access-Control-Request-Method"); resp.addHeader("Access-Control-Allow-Methods", method); resp.addHeader("Access-Control-Allow-Headers", headers); resp.setContentType("text/plain"); } resp.getWriter().flush(); return; } } // Fix ios6 caching post requests if ("post".equalsIgnoreCase(req.getMethod())) { resp.addHeader("Cache-Control", "no-cache"); } if (filterChain != null) { filterChain.doFilter(req, resp); } } @Override public void destroy() {} @Override public void init(FilterConfig arg0) throws ServletException {} } 

In the client code, you must set the full URL to access your server, but it depends on what type of ajax you use (RPC, RequestFactory, RequestBuilder, etc.).

In the case where you used RPC, you should do this:

  GreetingServiceAsync greetingService = GWT.create(GreetingService.class); ((ServiceDefTarget)greetingService) .setServiceEntryPoint("http://mygaeapp.appspot.com/mymodule/greet"); 

Answer 2

So what makes it gae at all? Where do you get the 500 error from? GAE or local apache? Is this running on the same hostname / port as the gwt server? If not, you may run into policies of the same origin.

I think the architecture you want will basically be like this:

Browser → GWT Server (tomcat?) → return gwt code

Browser → GWT RPC calls to the GWT server → The GWT server calls GAE via services or other calls → GWT formats the response and returns the data to the browser.

Although honestly, I do not know why you want to separate them. It sounds like you are just making it harder than necessary.