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

前后端分离框架前端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了。