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

Posted

技术标签:

【中文标题】JSP中JSON Web服务中的跨域错误?【英文标题】:Cross Domain Error in JSON webservice in JSP? 【发布时间】:2015-06-11 17:17:34 【问题描述】:

您好,我是 JSP 新手,我使用 Jersey 库 1.19 包创建 JSON Web 服务。此 Web 服务在 androidios 中运行良好,但通过 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 中添加了另一个&lt;init-param&gt;

<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="***"> 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");
        
    );
);

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

【问题讨论】:

如果您使用的是 GoogleChrome,您可以使用--disable-web-security 标志打开它。 @bigdestroyer 我想念 CrossDomainFilter 类中的@Provider。感谢您提供的信息。 【参考方案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>

【讨论】:

感谢您的信息。我想念 CrossDomainFilter 类中的@Provider【参考方案2】:

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

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

【讨论】:

【参考方案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调用中没有跨域错误,它工作正常。

【讨论】:

以上是关于JSP中JSON Web服务中的跨域错误?的主要内容,如果未能解决你的问题,请参考以下文章

前端的跨域访问解决方案!

如何避免 chrome web 扩展中的跨域读取阻塞(CORB)

JSON Web令牌(JWT)

json.parse 触发 React / MERN 中的跨域错误

Json web token

JSON Web Token