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