spring boot + cors解决前后端跨域问题

xiaoxiao2021-02-28  11

前后端分离部署技术大体有几种:jsonp,CORS,nginx反向代理,其中jsonp不支持post方法,具体说下CORS技术。

前端请求代码不变,用jquery.ajax()去请求

$.ajax({ url:"http://127.0.0.1:8080/user/login", type:'post', dataType : 'json', data:params, contentType : "application/json", success:function(date){ dispalyLoad(); if(date==0){ location.href="user/action.html"; }else if(date==1){ alert("账号错误"); }else if(date==2){ alert("密码错误"); } } });

后端我用的是spring boot  ,实现解决跨域问题主要有两种实现

第一种,用Filter拦截器进行对HttpServletResponse增加header,具体代码如下:

@Component @ServletComponentScan @WebFilter(urlPatterns = "/*",filterName = "allFilter") public class CORSFilter implements Filter{ @Override public void init(FilterConfig filterConfig) throws ServletException { // TODO Auto-generated method stub } @Override public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException { HttpServletResponse res = (HttpServletResponse) response; res.setHeader("Access-Control-Allow-Origin", "*"); res.setHeader("Access-Control-Allow-Methods", "*"); res.setHeader("Access-Control-Max-Age", "1728000"); res.setHeader("Access-Control-Allow-Credentials", "true"); res.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); chain.doFilter(request, res); } @Override public void destroy() { // TODO Auto-generated method stub } }

和spring mvc增加filter最大的区别就是spring boot提供了两个注解@ServletComponentScan @WebFilter省去了配置web.xml的麻烦,这样直接启动然后调用就可以实现前后端跨域了。

第二种办法就是增加一个aop切面,对所有的controller进行切面编程,从而增加header

先增加spring boot的aop依赖

<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-aop</artifactId> </dependency>

然后再写一个aop类,在头部插入Access-Control-Allow-Origin

public class ControllerAop { @Around("execution (* com.xx.controller.*.*(..))") public Object CORSAop(ProceedingJoinPoint pjp) throws Throwable{ HttpServletResponse response = ((ServletRequestAttributes) RequestContextHolder.getRequestAttributes()).getResponse(); response.setHeader("Access-Control-Allow-Origin", "*"); response.setHeader("Access-Control-Allow-Methods","GET,POST,OPTIONS,PUT"); Object proceed = pjp.proceed(); return proceed; }

这样就可以实现前后端跨域了

转载请注明原文地址: https://www.6miu.com/read-2450138.html

最新回复(0)