本文已参与「新人创作礼」活动，一起开启掘金创作之路。

springboot整合Filter实现前后端分离，解决CORS跨域问题

什么是跨域？

跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。通常所说的跨域是狭义的，是由浏览器同源策略限制的一类请求场景。从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同，都是跨域。

跨域带来的安全问题

跨域的访问会带来许多安全性的问题，比如，cookie 一般用于状态控制，常用于存储登录的信息，如果允许跨域访问，那么别的网站只需要一段脚本就可以获取你的 cookie，从而冒充你的身份去登录网站，造成非常大的安全问题，因此，现代浏览器均推行同源策略。

解决方法

跨域解决方案

通过 jsonp 跨域
document.domain + iframe 跨域
location.hash + iframe
window.name + iframe 跨域
postMessage 跨域
跨域资源共享（CORS）
nginx 代理跨域
nodejs 中间件代理跨域
WebSocket 协议跨域

(function loadXMLDoc() {
                var xmlhttp;
                xmlhttp = new XMLHttpRequest();
                            xmlhttp.onreadystatecatechange = function() {
                }
                            xmlhttp.open("post", "http://www.xxxxx.com:81/commondity/initSelectCommondity", true);
                            xmlhttp.withCredentials = true;
                            xmlhttp.send();
            })()

提示跨域异常

解决方法

@Component
@WebFilter(filterName = "loginFilter",urlPatterns = "/*")
public class CorsFilter extends GenericFilterBean{

	@Override
	public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain)
			throws IOException, ServletException {
		System.out.println("=====================================过滤器aaaaaaaa");
		HttpServletRequest request = (HttpServletRequest) req;
		HttpServletResponse response = (HttpServletResponse) res;
		response.setHeader("Access-Control-Allow-Origin", "*");
		response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE, PUT, GET");
		response.setHeader("Access-Control-Max-Age", "3600");
		response.setHeader("Access-Control-Allow-Headers", "x-requested-with");
		chain.doFilter(req, res);
	}

}

这里我踩了两个坑

过滤器类上没有使用@Component注解，导致一直不进过滤器。
之前直接实现Filter接口，在本地测试没问题，发布到服务器所有Controller接口访问变成404，然后使用继承这个最高级过滤器GenericFilterBean发布到服务器完美解决跨域问题。