spring boot 前后端分离跨域

1、前端报错

• Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access. The response had HTTP status code 403.
• Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. Origin 'http://localhost:8080' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.     

Access-Control-Allow-Origin设置为* 那么Access-Control-Allow-Credentials需要设置为false,可后端设置，也可以在前端把axios里的
withCredentials: false, // //是否支持cookie跨域 ,这一条设置为false就行了

对于附带身份凭证的请求，服务器不得设置 Access-Control-Allow-Origin 的值为*。这是因为请求的首部中携带了 Cookie 信息，如果 Access-Control-Allow-Origin 的值为*，请求将会失败。而将 Access-Control-Allow-Origin 的值设置为 http:xxx.com，则请求将成功执行

 

• Request header field token is not allowed by Access-Control-Allow-Headers in preflight response.

       token 未加到Access-Control-Allow-Headers中

2、后端代码

@Component
@WebFilter(urlPatterns = { "/*" }, filterName = "headerFilter")//这里的“/*” 表示的是需要拦截的请求路径
public class CorsFilter implements Filter {

    private static final Logger log = LoggerFactory.getLogger(CorsFilter.class);
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
        log.info("跨域过滤器启动");
    }

    @Override
    public void doFilter(ServletRequest request, ServletResponse servletResponse, FilterChain chain) throws IOException, ServletException {
        log.info("跨域过滤器工作");
        HttpServletResponse response = (HttpServletResponse) servletResponse;
        //解决跨域访问报错
        response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization,token,Content-Length,Content-MD5,Expect,Host");
        response.setHeader("Access-Control-Allow-Origin", "*");//CredentialsCredentials为true此处需具体域名
        response.setHeader("Access-Control-Allow-Credentials", "false");//此处设置为false ccess-Control-Allow-Origin才能设置为*
        response.setHeader("Access-Control-Allow-Methods", "POST, PUT, GET, DELETE");
        //设置过期时间
        //response.setHeader("Access-Control-Max-Age", "3600");
        // 编码
        //response.setCharacterEncoding("UTF-8");
        chain.doFilter(request, servletResponse);
    }

    @Override
    public void destroy() {
        log.info("跨域过滤器销毁");
    }
}

@Configuration  
public class CorsConfig extends WebMvcConfigurerAdapter {  

    @Override  
    public void addCorsMappings(CorsRegistry registry) {  
        registry.addMapping("/**")  
                .allowedOrigins("*")  
                .allowCredentials(true)  
                .allowedMethods("GET", "POST", "DELETE", "PUT")  
                .maxAge(3600);  
    }  

}