前后端分离框架前端react,后端springboot跨域问题分析
为啥跨域了
由于前后端不在一个端口上，也是属于跨域问题的一种，所以必须解决这个问题.
前端react的设置
react设置我这里使用了fetch方式请求后端接口,所以在fentch方法里设置两个参数：
- mode: “cors”；这是前端允许跨域的设置
- 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了。