前后端分离框架前端react,后端springboot跨域问题分析

时间:2023-03-08 16:35:34
前后端分离框架前端react,后端springboot跨域问题分析

前后端分离框架前端react,后端springboot跨域问题分析

为啥跨域了

由于前后端不在一个端口上,也是属于跨域问题的一种,所以必须解决这个问题.

前端react的设置

react设置我这里使用了fetch方式请求后端接口,所以在fentch方法里设置两个参数:

  1. mode: “cors”;这是前端允许跨域的设置
  2. credentials: ‘include’;由于我需要把浏览器的cookie传入后端,所以需要这个设置

springboot后端设置

直接上配置说吧
// An highlighted block
@Configuration
public class CorsConfig implements Filter { @Override
public void init(FilterConfig filterConfig) throws ServletException { } @Override
public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
HttpServletResponse response = (HttpServletResponse) res;
HttpServletRequest request = (HttpServletRequest) req;
String path = request.getServletPath();
//前端react项目的域名
response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE, PUT");
response.setHeader("Access-Control-Max-Age", "3600");
//设置允许访问cookie
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); if (request.getMethod().equals("OPTIONS")) {
response.setStatus(HttpServletResponse.SC_OK);
}else{
chain.doFilter(request, res);
}
} @Override
public void destroy() { }
}

由于一开始没有设置关于请求OPTIONS的设置,导致我的put,delete请求都会发送2次请求到后端,并且报错,说跨域问题,但是我这里已经做了跨域配置,所以应该不是这个问题。


if (request.getMethod().equals("OPTIONS")) {
response.setStatus(HttpServletResponse.SC_OK);
}else{
chain.doFilter(request, res);
}
}

后来翻阅了一些资料后,发现http请求,关于请求方法:get,post是基本请求,但是对于put,delete等其他请求时,浏览器会先发送一个"PreFlight"请求,这个是一个预请求。所以,当发现是这种预请求的时候,后台需要返回200的状态。这样配置完后,就ok了。