什么是跨域
跨域是指从一个域名的网页去请求另一个域名的资源。比如从www.baidu.com 页面去请求 www.google.com 的资源。跨域的严格一点的定义是:只要 协议,域名,端口有任何一个的不同,就被当作是跨域
前段时间接触一个新的项目,原本想着做成前后端分离的,但是这样就会涉及到 ajax 跨域的问题,那时候没解决,所以就没搞前后端分离,但是今天的项目又接触到跨域(前后端分离的问题),研究了一晚上,查了很多资料,也跟一些前辈沟通过,用的方法都不同,
有人说用谷歌的插件,有人说用Nginx 做个反向代理,更有人说,用 JSONP 的方式,这这些个方法都可行,可是操作难度有点大啊,第一个先不说,要FQ出去才能下载安装,第二个,对于很多新手来说,更是难以理解,
第三个, JSONP 只能是使用 get 方式请求数据,可是我们用 get 方式去请求数据的,这都是少数情况吧?所以,我综合了一下,希望能帮到更多的小伙伴!
这个配置允许跨域完全是在我们 后台的事,跟前端无关,我所用的后端框架是 SSM (其实也就是 Spring 的问题),其他框架的,请绕道!!!!(有接触 Nutz 框架的,这个框架的跨域更加简单,加一个注解就行了:@Filters(@By(type=CrossOriginFilter.class)))
好了,废话多了,言归正传,其实就 三部曲 就可以了,
1. 新建一个过滤器,并实现 Filter 接口
请注意导包!!!!
public class SimpleCORSFilter implements Filter { private boolean isCross = false; @Override public void destroy() { isCross = false; } @Override public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException { if (isCross) { HttpServletRequest httpServletRequest = (HttpServletRequest) request; HttpServletResponse httpServletResponse = (HttpServletResponse) response; System.out.println("拦截请求: " + httpServletRequest.getServletPath()); httpServletResponse.setHeader("Access-Control-Allow-Origin", "*"); httpServletResponse.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE"); httpServletResponse.setHeader("Access-Control-Max-Age", "0"); httpServletResponse.setHeader("Access-Control-Allow-Headers", "Origin, No-Cache, X-Requested-With, If-Modified-Since, Pragma, Last-Modified, Cache-Control, Expires, Content-Type, X-E4M-With,userId,token"); httpServletResponse.setHeader("Access-Control-Allow-Credentials", "true"); httpServletResponse.setHeader("XDomainRequestAllowed", "1"); } chain.doFilter(request, response); } @Override public void init(FilterConfig filterConfig) throws ServletException { String isCrossStr = filterConfig.getInitParameter("IsCross"); isCross = isCrossStr.equals("true") ? true : false; System.out.println(isCrossStr); } }
2. 在web.xml中设配置
<!-- 跨域请求 --> <filter> <filter-name>SimpleCORSFilter</filter-name> <filter-class>com.ssm.util.SimpleCORSFilter</filter-class> <init-param> <param-name>IsCross</param-name> <param-value>true</param-value> </init-param> </filter> <filter-mapping> <filter-name>SimpleCORSFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping>
3. 在 StringMVC 的配置文件中配置跨域请求
<!-- 接口跨域配置 --> <mvc:cors> <mvc:mapping path="/**" allowed-origins="*" allowed-methods="POST, GET, OPTIONS, DELETE, PUT" allowed-headers="Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With" allow-credentials="true" /> </mvc:cors>
Spring MVC 的跨域配置,到此结束,前端不用改任何东西,正常的使用 ajax 即可