Question

我使用最新的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");
        }
    });
});

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

$("#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数据源配合使用。我知道这可以做到，我觉得我就在那里。如果我需要提供更多信息，请告诉我。谢谢你的帮助。

Answer 1

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

找到

Answer 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服务。

SmartGWT数据源和CORS

2 个答案: