JSONP 方案
实现
在 Controller 中,直接返回 com.fasterxml.jackson.databind.util.JSONPObject 对象,前端代码中便可使用 JSONP 的方案接受。
@RequestMapping(value = "/test")
@ResponseBody
public Object test(@RequestParam(required = false,name = "callback") String callback) {
// 程序需要返回的数据
Map<String,String> result = new HashMap<>();
result.put("result","返回的结果");
if (callback == null || "".equals(callback)) {
return result; // 非 JSONP 请求,返回正常的 JOSN 数据
} else {
return new JSONPObject(callback, result); // JSONP 请求,返回 JOSNP 数据
}
}
缺点
JSONP 仅能使用 GET 请求的方式。 对于 RESTful 的 API 来说,发送 POST/PUT/DELET 请求将成为问题,不利于接口的统一。
共享 CORS 方案
实现
CORS需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能,IE浏览器不能低于IE10。
前端代理无需作处理,后端代码中,Header 头中添加 Access-Control-Allow-Origin: https://static.ixiaozhi.com
来告知浏览器允许的域名。
CORS 有简单与非简单请求,其中区别可见参考资料中的阮一峰的网络日志。
Java 服务器端,我们使用 Filter 来批量添加相关的 Header 头信息。
CORSFilter 类代码:
package com.ixiaozhi.filter;
import org.springframework.web.filter.OncePerRequestFilter;
import javax.servlet.FilterChain;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
/**
* Created by ixiaozhi
*/
public class CORSFilter extends OncePerRequestFilter {
@Override
protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOException {
// CORS 的域名白名单,不支持正规,允许所有可以用 *
response.addHeader("Access-Control-Allow-Origin", "https://static.ixiaozhi.com");
// 对于非简单请求,浏览器会自动发送一个 OPTIONS 请求,利用 Header 来告知浏览器可以使用的请求方式及 Header 的类型
if (request.getHeader("Access-Control-Request-Method") != null && "OPTIONS".equals(request.getMethod())) {
response.addHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");
response.addHeader("Access-Control-Allow-Headers", "Content-Type");
response.addHeader("Access-Control-Max-Age", "1");
}
filterChain.doFilter(request, response);
}
}
该过滤器在 web.xml
中配置:
<filter>
<filter-name>cors</filter-name>
<filter-class>com.ixiaozhi.filter.CORSFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>cors</filter-name>
<url-pattern>/*</url-pattern><!--需要允许CORS跨域的地址-->
</filter-mapping>
其他,前端的代码使用正常的 Ajax 调用方式就可以,无需关心跨域问题。