GWT(google Web Toolkit)

Recently I was doing feasibility study of implementation GWT for our next project.

The tool kit allows programmers write plain Java which be compiled into JavaScript for rich web front-end application. There is a Java to JavaScript compiler will compile the Java code to JavaScript while the library that comes with the tool kit will hide the any browser quicks for you. The resulting JavaScript code will only be load once on the client and only the data will be dynamically requested by the JavaScript code. I think it is wonderful programming model.

The issue I am running into is that since Javascript has so called Same Origin Policy . It prevents any scripts that try to request data from any servers other than the server that the scripts are loaded.

It is not much a problem for the GWT, the front-end development server happens to be the same back-end server if you are using built-in RPC calls. For me, I was going to use Microsoft IIS as my development back-end server. Since I am going to use Eclipse with GWT plugin as my front-end development environment, the JavaScript will be loaded from my front-end development server and will not be able to request any data from back-end server on a different port (it will violate the Same Origin Policy).

To work around the problem, I use a tool called Fiddler which allows you to modify the request on the fly. What you need to do it just download and install the software from the web site. Upon launching the Fiddler UI, press CTRL-R to open customized script editor (it can also be open via menu Rules | Customize Rules... ). Locate a function call OnBeforeRequest and insert the following lines:

        if (oSession.HostnameIs("MYAPP")) {
            if (oSession.PathAndQuery.StartsWith("/search")){
                oSession.host = "www.google.ca";
            }
            else {
                oSession.host = "127.0.0.1:8888";
            }
       
        }

It is quite self-explanatory. It basically says that if the host name is MYAPP, then rewrite the host name based on the requesting URL. In the example, if the URL is starting with "/search", it will send the request to "www.google.ca" otherwise it will send requests to localhost port 8888. It needs to customized to suit your needs.

After you set it up, you can now requesting paging via Internet Explorer (unfortunately it works only on IE). Try the following:

http://myapp/search?hl=en&q=test

http://myapp/com.mycompany.project.ImageViewer/ImageViewer.html

This will overcome the Same Origin Policy restriction for you since your JavaScript and back-end server will all appear as it originated from the same server.

It has the following drawbacks.
1. It does not work on Firefox.
2. The breakpoint has no effect if you invoking the page via the proxy. (I do not know why?)