Question

经过大量的工作，我有一个现有的后端Web服务应用程序，它由Spring-RS，Spring MVC，Spring控制器和Spring框架中的用户Jackson控制，将响应转换为JSON。

这是WEB-INF / myproject-servlet.xml

的一部分

<mvc:annotation-driven>
    <mvc:message-converters register-defaults="true">
        <bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">
          <property name="objectMapper">
             <bean class="com.fasterxml.jackson.databind.ObjectMapper">

                     <property name="dateFormat">
                        <bean class="java.text.SimpleDateFormat">
                            <constructor-arg type="java.lang.String" value="yyyy-MM-dd"></constructor-arg>
                        </bean>
                     </property>
             </bean>
          </property>
        </bean>
    </mvc:message-converters>
</mvc:annotation-driven>

<bean id="jsonHttpMessageConverter" class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">
    <property name="supportedMediaTypes" value="application/json"/>
</bean>

<bean class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter">
  <property name="messageConverters">
      <list>
        <ref bean="jsonHttpMessageConverter" />
      </list>
  </property>
</bean>

这个网络服务应用效果很好！我可以将WAR部署到我的本地tomcat，它可以很好地部署。我可以对控制器进行单元测试，以确保URL正确并且在Spring中正确配置了web-app。我可以点击URL并按照我的预期完全恢复JSON数据。网址是：

http://mylocalhost/myproject/invoices/invoiceId/1

返回1张发票。

现在，我正在运行一个SmartGWT网络应用程序，免费版本，我有一个RestDataScource控制器。我以前写过许多SmartGWT网络应用程序，这些应用程序都是包容性的：实体，dao，服务层，控制器和数据源。有了这个，只要控制器和数据源在同一个应用程序中，就没有任何跨客户端问题。而且我并不反对这样做，但我想尝试将它们分开。

我刚刚看到这不起作用！我的SmartGWT网络应用程序在Jetty本地运行，用于开发模式。起始网址为：

     http://mylocalhost:8888/myapp

当它试图在

上调用后端时

    http://mylocalhost:8080/my-ws, then my listgrid gives me a warning message.

如果我可以添加一行：RPCManager.setAllowCrossDomainCalls（true）; 我是否在RESTDataSource中添加了这个？我在哪里添加这个？它真的会让一切运转起来吗？还有什么需要补充的吗？

所以，我正在查看XJSONDataSource，我发现我需要对RestDataSource进行一些更改才能将其转换为XJsonDataSource。这里有一些很好的信息和另一个帖子，他们建议添加：

   // Where do I put this line?   the controller or the datasource
   String callbackString = request.getParameter("callback");

   // Where do I put this code?  the controller or the datasource
   response.setContentType("text/X-JSON");
   response.getWriter().write( callbackString + " ( " + JSONstring + " ) " );
   response.setStatus(HttpServletResponse.SC_OK);

我不确定此代码的位置，所以我需要一些额外的帮助。就控制器而言，这是它的一部分：

    @RequestMapping(value = "/invoiceId", method = RequestMethod.GET, headers = "Accept=application/json")
    public @ResponseBody
        InvoiceDetailDTO getContactTypeByUserId(@RequestBody String invoiceNumber)
     {
         InvoiceDetailDTO invoiceDetailDto = invoiceService.getInvoiceDetail(invoiceNumber);

        // invoiceDetailDto is automatically converted to JSON by Spring
        return invoiceDetailDto;
     }

在上面的代码中，“request”和“response”必须进入控制器，我该怎么做？

最终，我希望只使用我的RestDataSource并调整它以我想要的方式工作，并忽略任何这些跨站点问题。如果我确实需要使用XJSONDataSource，我只需要一些非常好的示例，以及如何根据需要调整控制器的示例。

谢谢！

Answer 1

在初始化的早期阶段（例如 - RPCManager.setAllowCrossDomainCalls(true);）应该调用

onModuleLoad()。

getContactTypeByUserId可能必须添加Access-Control-Allow-Origin作为具有适当值的响应标头检查http://en.wikipedia.org/wiki/Cross-origin_resource_sharing。
基于http://forums.smartclient.com/showthread.php?t=15487，SmartGWT应自行处理跨域请求。

作为最糟糕的情况，您可能必须发送JSONP样式响应以及必需的标题才能使其正常工作。
在这种情况下，最好有一个单独的方法，类似于以下，来提供SmartGWT请求我没有使用过XJSONDataSource，所以以下只是一个指南。

// use a slightly different URI to distinguish from other controller method
@RequestMapping(value = "/invoiceId/sgwt", method = RequestMethod.GET, headers = "Accept=application/json")
public @ResponseBody String getContactTypeByUserIdForSgwt(@RequestBody String invoiceNumber,
        HttpServletRequest request, HttpServletResponse response) {

     // can reuse normal controller method
     InvoiceDetailDTO invoiceDetailDto = getContactTypeByUserId(invoiceNumber);

     // use jackson or other tool to convert invoiceDetailDto to a JSON string
     String JSONstring = convertToJson(invoiceDetailDto);

    // will have to check SmartGWT request to make sure actual parameter name that send the callback name
    String callbackString = request.getParameter("callback"); 

    response.setContentType("text/X-JSON");

    return  callbackString + " ( " + JSONstring + " ) " ;
 }

更新

由于之前的努力遗留下来，清理代码（或从头开始/最小化）可能是一个好主意。

解决这个问题分为三个阶段：
1.让SmartGWT正常工作，不使用服务
2.使服务正常使用CORS请求
3.切换SmartGWT以使用服务

第1阶段应该用来消除任何客户方面的问题如果客户端在部署在同一主机/域中时正在使用该服务，请跳至第2阶段。

第1阶段
为此，可以使用提供静态响应的数据URL，如RestDataSource JSON responses中所述将示例响应放在类似于test.json的文件中，并使其可以从客户端Web应用程序访问将DataSource代码保持在最低限度，并将setDataURL();与test.json位置一起使用。

test.json - 更改（并根据需要添加）字段名称和值

{    
 response:{
    status:0,
    startRow:0,
    endRow:3,
    totalRows:3,
    data:[
        {field1:"value", field2:"value"},
        {field1:"value", field2:"value"},
        {field1:"value", field2:"value"},
    ]
 }
}

数据源

public class TestDS extends RestDataSource {

    private static TestDS instance = new TestDS();

    public static TestDS getInstance() {
        return instance;
    }

    private TestDS() {
        setDataURL("data/test.json");       // => http://<client-app-host:port>/<context>/data/test.json
        setDataFormat(DSDataFormat.JSON);
        // setClientOnly(true);

        DataSourceTextField field1 = new DataSourceTextField("field1", "Field 1");
        DataSourceTextField field2 = new DataSourceTextField("field2", "Field 2");

        setFields(field1, field2);
    }
}

第2阶段
检查参考资料以获取更多详

来自localhost:8118中托管的网页的失败的预检CORS请求的标头，以及localhost:7117中托管的服务。由于端口不同而失败。将在不同的方案（https / ftp / file / etc.）或不同的主机/域上失败。

Host: localhost:7117
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:22.0) Gecko/20100101 Firefox/22.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Origin: http://localhost:8118                   <= indicates origin to which access should be granted
Access-Control-Request-Method: GET              <= indicates the method that will be used in actual request
Access-Control-Request-Headers: content-type    <= indicates the headers that will be used in actual request

Server: Apache-Coyote/1.1
Allow: GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS
Content-Length: 0

成功请求的请求/响应标头对。

Host: localhost:7117
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:22.0) Gecko/20100101 Firefox/22.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Origin: http://localhost:8118
Access-Control-Request-Method: GET
Access-Control-Request-Headers: content-type

Server: Apache-Coyote/1.1
Access-Control-Allow-Origin: http://localhost:8118
Access-Control-Allow-Methods: GET
Access-Control-Allow-Headers: Content-Type
Allow: GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS
Content-Length: 0

Host: localhost:7117
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:22.0) Gecko/20100101 Firefox/22.0
Accept: application/json, text/javascript, */*; q=0.01
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Content-Type: application/json
Referer: http://localhost:8118/cors-test.html
Origin: http://localhost:8118

Server: Apache-Coyote/1.1
Access-Control-Allow-Origin: *
Content-Type: application/json
Transfer-Encoding: chunked

为了支持CORS请求，服务后端必须正确响应预检OPTIONS请求，而不仅仅是服务呼叫。
这可以使用ServletFilter完成。

<filter>
    <filter-name>corsfilter</filter-name>
    <filter-class>test.CorsFilter</filter-class>
</filter>

<filter-mapping>
    <filter-name>corsfilter</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

public class CorsFilter extends OncePerRequestFilter {
    @Override
    protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain)
            throws ServletException, IOException {
        if (request.getHeader("Access-Control-Request-Method") != null && "OPTIONS".equals(request.getMethod())) {
            response.addHeader("Access-Control-Allow-Origin", "http://localhost:8118");

            // list of allowed methods, Access-Control-Request-Method must be a subset of this
            response.addHeader("Access-Control-Allow-Methods", "GET");
            // list of allowed headers, Access-Control-Request-Headers must be a subset of this
            response.addHeader("Access-Control-Allow-Headers", "Content-Type, If-Modified-Since");

            // pre-flight request cache timeout
            // response.addHeader("Access-Control-Max-Age", "60");
        }
        filterChain.doFilter(request, response);
    }
}

@RequestMapping(method = RequestMethod.GET, value = "/values", produces = MediaType.APPLICATION_JSON_VALUE)
public ResponseEntity<Map> getValues() {
    List<Map<String, Object>> values = getValues(); // handle actual data processing and return a list suitable for response

    SgwtResponse sgwtResponse = new SgwtResponse(); // A POJO with basic (public) attributes
    sgwtResponse.status = 0L;
    sgwtResponse.startRow = 0L;
    sgwtResponse.endRow = Long.valueOf(values.size());
    sgwtResponse.totalRows = sgwtResponse.startRow + sgwtResponse.endRow;
    sgwtResponse.data = values; // java.util.List

    Map<String, SgwtResponse> jsonData = new HashMap<String, SgwtResponse>();
    jsonData.put("response", sgwtResponse);

    HttpHeaders headers = new HttpHeaders();
    headers.add("Access-Control-Allow-Origin", "*"); // required

    return new ResponseEntity<Map>(jsonData, headers, HttpStatus.OK);
}

使用jQuery使用XHR检索JSON响应的简单测试页更改URL并在客户端Web应用程序中部署以直接测试服务，而无需使用SmartGWT。

<!DOCTYPE html>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script>
            $(document).ready(function () {
                $("#retrieve").click(function () {
                    $.ajax({
                        type: "GET",
                        contentType: "application/json",
                        url: "<URL-of-service>",
                        dataType: "json",
                        success: function (data, status, xhr) {
                            $("#content").text(JSON.stringify(data, null, 2));
                        },
                        error: function (xhr, status, error) {
                            $("#content").text("Unable to retrieve data");
                        }
                    });
                });
            });
        </script>
    </head>
    <body>
        <input type="button" id="retrieve" value="Retrieve"/>
        <div id="content"/>
    </body>
</html>

对于SmartGWT，If-Modified-Since需要

Access-Control-Allow-Headers标题在SmartGWT初始化期间使用RPCManager.setAllowCrossDomainCalls(true);以避免警告。

大多数现代浏览器（浏览器兼容性¹）和SmartGWT RestDataSource 支持CORS请求。
仅当您必须依赖JSONP时才使用XJSONDataSource，因为浏览器与CORS请求不兼容。

为飞行前请求发送Access-Control-Allow-Origin: *将允许任何网站对服务进行跨域调用，这可能会带来安全问题，而且*无法在某些CORS请求中使用。<登记/> 更好的方法是指定允许跨域请求的确切站点 - Access-Control-Allow-Origin: http://www.foo.com 在这种情况下可能不需要，但如果需要，请检查Access-Control-Allow-Origin Multiple Origin Domains?，以找到允许多个站点发出CORS请求的方法。

参考文献：
[1] https://developer.mozilla.org/en/docs/HTTP/Access_control_CORS
[2] http://java-success.blogspot.com/2012/11/cors-and-jquery-with-spring-mvc-restful.html

具有SpringMVC和跨客户端的Smartgwt RestDataSource

1 个答案:

更新