Java服务器端跨域问题解决方案

Java 服务器端跨域问题指的是当客户端所在的网页的域名、端口、协议与Web服务器所在的域名、端口、协议不一致时，客户端无法直接向Web服务器发起请求的问题。

方案一：使用CORS

CORS (Cross-Origin Resource Sharing)是W3C规范，允许Web服务器在响应客户端请求时，明确指示客户端的跨源请求是允许的。通过在响应头中设置Access-Control-Allow-Origin，可以指定哪些站点可以访问该接口。下面是使用CORS解决Java服务器端跨域问题的步骤。

1. 在Java Web服务器上，对需要跨域访问的URL进行设置（可以在web.xml中配置）。

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

这里使用了一个自定义的过滤器CORSFilter，代码如下：

public class CORSFilter 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, PUT");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "x-requested-with, Authorization, Content-Type");
        chain.doFilter(req, res);
    }

    public void init(FilterConfig filterConfig) {}

    public void destroy() {}
}

1. 在响应头中设置Access-Control-Allow-Origin。

httpResponse.addHeader("Access-Control-Allow-Origin", "*");
httpResponse.addHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE, PUT");
httpResponse.addHeader("Access-Control-Allow-Headers", "x-requested-with, Authorization, Content-Type");

方案二：使用JSONP

JSONP (JSON with Padding)是一种跨域数据交互方式，在当前页面中创建一个script标签，通过src属性引入服务端返回的js文件，该js文件返回的数据则在回调函数中处理。使用JSONP解决Java服务器端跨域问题的步骤如下：

1. 在Java Web服务器上，编写一个可以返回JSON格式数据的接口，如下：

@RequestMapping("/jsonp")
@ResponseBody
public String jsonp(String callback) {
    JSONObject data = new JSONObject();
    data.put("name", "John");
    data.put("age", 20);
    return callback + "(" + data.toJSONString() + ")";
}

此处的callback参数即是前端传入的回调函数名称。

1. 在前端页面中，在需要跨域访问的请求中添加callback参数，并定义回调函数，如下所示：

function jsonp(callback) {
    var script = document.createElement("script");
    script.src = "http://localhost:8080/jsonp?callback=" + callback;
    document.body.appendChild(script);
}

function handleJsonpData(data) {
    console.log(data);
}

jsonp("handleJsonpData");

此处的handleJsonpData即为回调函数名称，注意该函数定义应该在请求之前。