Javaweb使用cors完成跨域ajax数据交互

下面是一份关于Javaweb使用cors完成跨域ajax数据交互的攻略。

什么是跨域

跨域是指一个浏览器中从一个域名的网页去请求另一个域名的资源，如请求资源的协议（HTTP或HTTPS）或端口不同于当前页面所在的URL的域。这种情况通常叫做“跨域请求”。

CORS是什么

CORS（Cross-Origin Resource Sharing）是一种机制，允许Web应用服务器进行跨域访问控制，从而使安全地进行跨域数据传输成为可能。

如何使用cors完成跨域ajax数据交互

在Java Web应用中，使用CORS可以完成跨域Ajax数据交互。

在服务端添加CORS过滤器

首先需要在服务端添加一个CORS过滤器，该过滤器将添加跨域响应头，以便浏览器允许跨域请求。以下是CORS过滤器的样例，用于允许所有来源的跨域请求：

public class CorsFilter implements Filter {
    public void init(FilterConfig config) throws ServletException {}
    public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) resp;
        HttpServletRequest request = (HttpServletRequest) req;
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE, PUT");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "x-requested-with");
        chain.doFilter(req, resp);
    }
    public void destroy() {}
}

上述代码中，我们在响应头中设置Access-Control-Allow-Origin为*，允许所有来源的跨域请求；Access-Control-Allow-Methods为POST、GET、OPTIONS、DELETE和PUT等请求方式；Access-Control-Max-Age为3600，表示在3600秒内不需要再发送预请求（OPTIONS请求）；Access-Control-Allow-Headers为x-requested-with，表示允许前端在请求头中添加x-requested-with字段进行跨域请求。

然后，需要在web.xml中添加该过滤器。

<filter>
    <filter-name>CorsFilter</filter-name>
    <filter-class>com.example.filter.CorsFilter</filter-class>
</filter>
<filter-mapping>
    <filter-name>CorsFilter</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

使用jQuery发送跨域Ajax请求

使用jQuery的ajax方法进行跨域请求，代码如下所示：

$.ajax({
    url: 'http://example.com/api',
    dataType: 'json',
    crossDomain: true,
    success: function (data) {
        console.log(data);
    },
    error: function (xhr, status, error) {
        console.log(error);
    }
});

上述代码中，url为需要请求的URL地址；dataType为响应数据类型，设置为json；crossDomain设置为true表示需要进行跨域请求。

使用原生JavaScript发送跨域Ajax请求

使用原生JavaScript的XMLHttpRequest对象进行跨域请求，代码如下所示：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/api', true);
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var data = JSON.parse(xhr.responseText);
        console.log(data);
    }
};
xhr.send();

上述代码中，我们使用XMLHttpRequest对象创建一个GET请求，请求地址为http://example.com/api。当服务器返回数据时，我们需要检查HTTP状态码是否为200，然后解析响应文本，并将其输出到控制台中。

示例说明

下面有两个例子来展示如何使用CORS技术来完成跨域数据交互。

示例1：使用jQuery跨域获取数据

需要获取一个位于http://example.com/api的服务端接口返回的数据，该接口返回一个JSON格式的数据对象。

在客户端发送Ajax请求，代码如下：

$.ajax({
    url: 'http://example.com/api',
    dataType: 'json',
    crossDomain: true,
    success: function (data) {
        console.log(data);
    },
    error: function (xhr, status, error) {
        console.log(error);
    }
});

在服务端，添加CORS过滤器的代码如下：

public class CorsFilter implements Filter {
    public void init(FilterConfig config) throws ServletException {}
    public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) resp;
        HttpServletRequest request = (HttpServletRequest) req;
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE, PUT");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "x-requested-with");
        chain.doFilter(req, resp);
    }
    public void destroy() {}
}

示例2：使用原生JavaScript跨域获取数据

需要获取一个位于http://example.com/api的服务端接口返回的数据，该接口返回一个JSON格式的数据对象。

在客户端，发送Ajax请求，代码如下：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/api', true);
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var data = JSON.parse(xhr.responseText);
        console.log(data);
    }
};
xhr.send();