毕设之路（三）前后端分离下 LayUI 产生的跨域问题导致无法携带 Header 请求后台解决方案

在使用 LayUI 的时候，由于采用前后端分离的模式进行开发，会遇到跨域问题。

跨域问题表现在：无法将用户信息从前端传递到后端去，导致服务器无法标识客户端的身份，为采用 JWT 的方式校验用户身份，跨域问题成了必须解决的一个难题。

首先，服务端必须进行跨域配置，此处必须配置两个地方：

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedHeaders("*")
                .allowedMethods("*")
                .allowCredentials(true)
                .allowedOrigins("client address");
    }
}

自定义过滤器，该拦截器的作用：跨域请求会进行两次请求，分别是 OPTIONS 和 真正请求，只有在 OPTIONS 通过以后，才会发起真正的请求。该过滤器就是保证了两次请求的成功。

package top.smallpineapple.salecarsystem.filter;

@Component
public class SecondOrigionRequestFilter implements Filter {


    @Override
    public void init(FilterConfig filterConfig) throws ServletException {

    }

    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse httpResponse = (HttpServletResponse) response;
        HttpServletRequest httpRequest = (HttpServletRequest) request;
        httpResponse.setHeader("Access-Control-Allow-Origin", httpRequest.getHeader("Origin"));
        httpResponse.setHeader("Access-Control-Allow-Methods", httpRequest.getMethod());
        httpResponse.setHeader("Access-Control-Max-Age", "3600");
        httpResponse.setHeader("Access-Control-Allow-Headers", httpRequest.getHeader("Access-Control-Request-Headers"));
        chain.doFilter(request, response);
    }

    @Override
    public void destroy() {

    }
}

然后在 LayUI 中，由于数据表格无法进行跨域请求，我们需要修改源码，在 table.js 文件中找到 .ajax 开始的代码，在内部添加上这一行：

crossDomain:true

在数据表格发起请求以及其它的 GET/POST 请求中，我们同样也要加上上面这一行，之后就可以携带 Header 进行请求，解决了 JWT 中的 token 传递给后端的需求。

注意：该跨域只对 GET 和 POST 请求开放，PUT 和 DELETE 请求暂测不过，不过 GET 和 POST 在个人开发的时候已经够用了。