JSP中JSON Web服务中的跨域错误？

Question

您好，我是 JSP 新手，我使用 Jersey 库 1.19 包创建 JSON Web 服务。此 Web 服务在 Android 和 iOS 中运行良好，但通过 Ajax 调用时，它显示类似跨域错误的错误。

Web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns="http://java.sun.com/xml/ns/javaee"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
    id="WebApp_ID" version="2.5">
    <display-name>Sales Report</display-name>
    <welcome-file-list>
        <welcome-file>index.html</welcome-file>
        <welcome-file>index.jsp</welcome-file>
    </welcome-file-list>
    <servlet>
        <servlet-name>ServletAdaptor</servlet-name>
        <servlet-class>com.sun.jersey.spi.container.servlet.ServletContainer</servlet-class>

        <init-param>
            <param-name>com.sun.jersey.config.property.packages</param-name>
            <param-value>model</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>ServletAdaptor</servlet-name>
        <url-pattern>/report/*</url-pattern>
    </servlet-mapping>
</web-app>

网络服务类

@GET
@Path("/sales_order_details")
@Produces("application/json")
public String order_details(){
    String feeds  = null;
    try 
    {
        ArrayList<Order_headers> whole_data = null;

        Project projectManager= new Project();
        whole_data = projectManager.order_details();
        feeds=Arraylist_to_json.Order_edtails(whole_data);

    } catch (Exception e){
        e.printStackTrace();
    }
    return feeds;
}

在 Google 中搜索后，我得到了一种添加 ContainerResponseFilter 的解决方案，但现在也遇到了同样的错误。

CrossDomainFilter 类

public class CrossDomainFilter implements ContainerResponseFilter {

    @Override
    public ContainerResponse filter(ContainerRequest req,ContainerResponse contResp) {
        // TODO Auto-generated method stub

        ResponseBuilder resp = Response.fromResponse(contResp.getResponse());
        resp.header("Access-Control-Allow-Origin", "*").header("Access-Control-Allow-Methods", "GET, POST, OPTIONS");

        String reqHead = req.getHeaderValue("Access-Control-Request-Headers");

        if (null != reqHead && !reqHead.equals("")) {
            resp.header("Access-Control-Allow-Headers", reqHead);
        }

        contResp.setResponse(resp.build());
        return contResp;
    }
}

在web.xml 中添加了另一个<init-param>

<init-param>
    <param-name>com.sun.jersey.spi.container.ContainerResponseFilters</param-name>
    <param-value>cros.filter.CrossDomainFilter</param-value>
</init-param>

Ajax 调用

$(function() {
    $.ajax({
        type:'GET',
        dataType:'jsonp',
        jsonp:'jsonp',
        url:'http://192.168.1.2:8080/Sales_report/report/customer_details',
        success:function(data) {
            $.each(data["customer_details"], function(index, item) {
                var $tag = item.city;
                var $count = item.customer_id;
                $("body").append('<div class="stackoverflow"> The Tag <span class="q-tag">' + $tag + '</span> has <span class="q-count">' + $count + '</span> Questions.</div>')
            });
        },
        error:function() {
            alert("Sorry, I can't get the feed");
        }
    });
});

谁能知道帮我解决这个问题。

Answer 1

使用 cors-filter jar http://grepcode.com/snapshot/repo1.maven.org/maven2/com.thetransactioncompany/cors-filter/1.3.2

在您的 web.xml 文件（网络应用）中使用过滤器

<filter>
<filter-name>CORS</filter-name>
<filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
<init-param>
    <param-name>cors.allowGenericHttpRequests</param-name>
    <param-value>true</param-value>
</init-param>
<init-param>
    <param-name>cors.allowOrigin</param-name>
    <param-value>*</param-value>
</init-param>
<init-param>
    <param-name>cors.allowSubdomains</param-name>
    <param-value>true</param-value>
</init-param>
<init-param>
    <param-name>cors.supportedMethods</param-name>
    <param-value>GET, HEAD, POST, OPTIONS</param-value>
</init-param>
<init-param>
    <param-name>cors.supportedHeaders</param-name>
    <param-value>Content-Type, X-Requested-With</param-value>
</init-param>
<init-param>
    <param-name>cors.exposedHeaders</param-name>
    <param-value>X-Test-1, X-Test-2</param-value>
</init-param>
<init-param>
    <param-name>cors.supportsCredentials</param-name>
    <param-value>true</param-value>
</init-param>
<init-param>
    <param-name>cors.maxAge</param-name>
    <param-value>-1</param-value>
</init-param>
</filter>


<filter-mapping>
<filter-name>CORS</filter-name>
 <url-pattern>/EmployeeResource</url-pattern>
</filter-mapping>

Answer 2

您必须在服务器端响应中添加 Access-control-allow-origin 的标头。

response.header("Access-Control-Allow-Origin", "*")
response.header("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT")

Answer 3

我想念 CrossDomainFilter 类 中的@Provider 注释，就像我在下面提到的那样

@Provider
public class CrossDomainFilter implements ContainerResponseFilter {

@Override
public ContainerResponse filter(ContainerRequest req,ContainerResponse contResp) {
    // TODO Auto-generated method stub

    ResponseBuilder resp = Response.fromResponse(contResp.getResponse());
    resp.header("Access-Control-Allow-Origin", "*").header("Access-Control-Allow-Methods", "GET, POST, OPTIONS");

    String reqHead = req.getHeaderValue("Access-Control-Request-Headers");

    if (null != reqHead && !reqHead.equals("")) {
        resp.header("Access-Control-Allow-Headers", reqHead);
    }

    contResp.setResponse(resp.build());
    return contResp;
}
}

之后在Ajax调用中没有跨域错误，它工作正常。