SmartGWT Datasource and CORS

Question

I am using the latest Spring 4.1.5 to create a RESTful back-end. The web-services Unit Tested and are working perfectly. I implemented the SimpleCorsFilter for them to make these work cross-domain.

public class SimpleCORSFilter implements Filter {

    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
    HttpServletResponse response = (HttpServletResponse) res;
    response.setHeader("Access-Control-Allow-Origin", "*");
    response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
    response.setHeader("Access-Control-Max-Age", "3600");
    response.setHeader("Access-Control-Allow-Headers", "x-requested-with");
        chain.doFilter(req, res);
    }
    public void init(FilterConfig filterConfig) {}
    public void destroy() {}
}

Before testing these web-services with a SmartGWT RESTDataSource, I am testing with some JavaScript first. I have three methods I am testing by. This first method, based on another link here at StackOverflow suggests that this would be a good test to make sure the SmartGWT DataSource would work. When I test this code from the browser, I get a Cross-Script Error.

$("#retrieve1").click(function()
{
    $.ajax({
        type : "GET",
        contentType : "application/json",
        url : "http://127.0.0.1:8080/urm-ws-0.0.1-SNAPSHOT/rest/login/user/tholmes/pwd/mypwd",
        dataType : "json",
        crossDomain : true,
        success : function(data, status,xhr) {
            $("#content").text();
        },
        error : function(xhr,status, error) {
            $("#content").text("Unable to retrieve data");
        }
    });
});

However, these next two methods work great to bring back data. So, in this case, I am convinced that the web-services will work cross-domain.

$("#retrieve2").click(function()
{
    var xhr = new XMLHttpRequest();
    xhr.open('GET','http://127.0.0.1:8080/urm-ws-0.0.1-SNAPSHOT/rest/login/user/tholmes/pwd/mypwd');
    xhr.onreadystatechange = function()
    {
        if (this.status == 200 && this.readyState == 4)
        {
            console.log('response: ' + this.responseText);
        }
    };
    xhr.send();
});

$("#retrieve3").click(function()
{
    $.ajax(
            {
                url : "http://localhost:8080/urm-ws-0.0.1-SNAPSHOT/rest/login/user/tholmes/pwd/mypwd"
            })
    .then(
            function(data) {
                $('#userId').append(data.userId);
                $('#username').append(data.username);
            });

});

Not being super knowledgeable about JavaScript, I am wondering what the difference between the three methods are? The first method doesn't work for some reason, so I don't know if I need to fix that code, or do I need to fix the code in that JavaScript method?

Ultimately, I'd like to get my web-services working with SmartGWT datasources. I know this can be done, and I feel like I am right there. If I need to provide any more information, please let me know. Thanks for any help.

Answer 1

I found part of my answer with:

The CORS Filter they had was slightly different than mine. I had the following:

response.setHeader("Access-Control-Allow-Headers", "x-requested-with");

and it really needed to be:

response.setHeader("Access-Control-Allow-Headers", "x-requested-with, Content-Type, If-Modified-Since");

Once I added this, then the first javascript method worked, and once that worked, then I was able to test my SmartGWT DataSource, and it worked with my remote RESTful web-service.