后端cors跨域出错 前后端分离

2023.1.12

和朋友一起开发小型后台管理系统的时候,他的前端cors跨域报错,于是我就用springmvc提供的方法进行跨域处理。但是问题并未解决。后面查了很多资料想了很久。

一个http请求,先走filter,到达servlet后才进行拦截器的处理,而我的项目使用过滤器filter进行登录验证,也就是说,在springmvc加的配置不会赶在登录验证代码执行之前生效,等同于没有配置。我们可以把cors放在filter里,先执行处理cors的过滤器,再执行其他filter和controller的代码。

/**
 * 过滤器,用于cors跨域处理
 */
@Slf4j
@WebFilter(filterName = "corsFilter", urlPatterns = "/*")
public class CorsFilter implements Filter {

    /**
     * 跨域处理
     * @param servletRequest
     * @param servletResponse
     * @param filterChain
     * @throws IOException
     * @throws ServletException
     */
    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        HttpServletRequest request = (HttpServletRequest) servletRequest;
        HttpServletResponse response = (HttpServletResponse) servletResponse;
        String origin = request.getHeader("origin");// 获取源站
        response.setHeader("Access-Control-Allow-Origin", origin);
        response.setHeader("Access-Control-Allow-Methods", "POST, GET");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Allow-Headers", "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");
        filterChain.doFilter(request , response);
    }

    @Override
    public void destroy() {

    }

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

    }
}

这里注意,尽量提高改过滤器的优先级,filterame根据字符串大小比较,越大的优先级越高。 


2023.1.16

在学习微服务项目的时候,又出现了cors报错,前端报错

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

//请求头字段token在预检请求的响应里不允许

 所以我们在后端对cors的处理需要允许前端带到后端的token字段


2023.1.29 

发现一种更好的方式,我写在了网关的配置文件里

/**
 * 网关配置
 */
@Configuration
public class CorsConfig {

    /**
     * Cors 跨域
     * @return
     */
    @Bean
    public CorsWebFilter corsFilter() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        // 允许的请求源 (如:http://localhost:8080)
        corsConfiguration.addAllowedOrigin("*");
        // 允许的请求方法 ==> GET, HEAD, POST, PUT, PATCH, DELETE, OPTIONS, TRACE
        corsConfiguration.addAllowedMethod("*");
        // 允许的请求头
        corsConfiguration.addAllowedHeader("*");
        // 是否允许携带cookie跨域
        corsConfiguration.setAllowCredentials(true);
        // URL 映射 (如: /admin/**)
        // 任意url都要进行跨域配置
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**",corsConfiguration);

        return new CorsWebFilter(source);

    }
}


版权声明:本文为weixin_58428691原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。