SmartGWT 数据源和 CORS答案

【问题标题】：SmartGWT Datasource and CORSSmartGWT 数据源和 CORS
【发布时间】：2015-06-12 00:32:00
【问题描述】：

我正在使用最新的 Spring 4.1.5 创建一个 RESTful 后端。网络服务单元测试并且运行良好。我为他们实现了 SimpleCorsFilter 以使这些工作跨域。

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() {}
}

在使用 SmartGWT RESTDataSource 测试这些 Web 服务之前，我先使用一些 JavaScript 进行测试。我有三种测试方法。第一种方法，基于 StackOverflow 上的另一个链接，表明这将是一个很好的测试，以确保 SmartGWT 数据源能够正常工作。当我从浏览器测试这段代码时，我得到一个跨脚本错误。

$("#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");
        }
    });
});

但是，接下来的两种方法可以很好地恢复数据。因此，在这种情况下，我确信 Web 服务将跨域工作。

$("#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);
            });

});

对 JavaScript 不是很了解，我想知道这三种方法有什么区别？第一种方法由于某种原因不起作用，所以我不知道是否需要修复该代码，还是需要修复该 JavaScript 方法中的代码？

最后，我想让我的网络服务与 SmartGWT 数据源一起工作。我知道这是可以做到的，我觉得我就在那里。如果我需要提供更多信息，请告诉我。感谢您的帮助。

【问题讨论】：

第一种情况有什么错误？
是 Firefox 浏览器说有一个跨域脚本调用被阻止。但是，我刚刚解决了这个问题，所以我想我现在已经准备好了。我有一个 GET 工作，所以现在我必须尝试 PUT、POST 和 DELETE。

标签： javascript spring rest cors smartgwt

【解决方案1】：

在第一种情况下，浏览器发送 preflighted OPTIONS 请求，因为 application/json 内容类型。我想这个请求在服务器上没有正确处理。有关此差异的更多信息可以找到here

【讨论】：

【解决方案2】：

我找到了部分答案：

他们使用的 CORS 过滤器与我的略有不同。我有以下内容：

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

它确实需要：

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

一旦我添加了这个，那么第一个 javascript 方法就起作用了，一旦它起作用，我就能够测试我的 SmartGWT 数据源，它可以与我的远程 RESTful web 服务一起使用。

【讨论】：