Spring 中关于CORS 跨域配置

Lyndon1107

已于 2024-01-18 18:18:15 修改

阅读量331

点赞数

分类专栏： HTML JS CSS 文章标签： ajax 前端

于 2022-08-12 13:44:39 首次发布

本文链接：https://blog.csdn.net/qq_19636353/article/details/126302533

版权

HTML JS CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

跨域之CorsFilter
https://blog.csdn.net/weixin_52236586/article/details/130047812

Spring Cloud 解决跨域
https://www.cnblogs.com/javastack/p/17701725.html

Spring 5 Webflux中，配置CORS，可以通过自定义WebFilter实现
https://www.jb51.net/article/217467.htm

跨域处理 GlobalCorsConfig

@Configuration
public class GlobalCorsConfig {  // https://www.freesion.com/article/1770121686
    @Bean
    public FilterRegistrationBean corsFilter() {
        CorsConfiguration config = new CorsConfiguration();
        config.setAllowCredentials(true);
        config.addAllowedOriginPattern("*");
        //config.addAllowedOrigin("*");
        config.addAllowedHeader("*");
        config.addAllowedMethod("*"); //GET,HEAD,POST,OPTIONS,DELETE
        config.setMaxAge(1800L); //设置时长
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", config);
        FilterRegistrationBean cros = new FilterRegistrationBean(new CorsFilter(source));
        //设置优先级最高
        cros.setOrder(Ordered.HIGHEST_PRECEDENCE);
        return cros;
    }
}

SpringBoot 跨域配置类过滤器跨域配置


//public class GlobalCorsConfig implements Filter {
//
//    @Override
//    public void init(FilterConfig filterConfig) throws ServletException {
//
//    }
//
//    @Override
//    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain)
//            throws IOException, ServletException {
//
//        HttpServletRequest request = (HttpServletRequest) servletRequest;
//        HttpServletResponse response = (HttpServletResponse) servletResponse;
//        response.setContentType("textml;charset=UTF-8");
//        response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
//        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
//        response.setHeader("Access-Control-Max-Age", "0");
//        response.setHeader("Access-Control-Allow-Headers","Origin, No-Cache, X-Requested-With, If-Modified-Since, Pragma, Last-Modified, Cache-Control, Expires, Content-Type, X-E4M-With,userId,token");
//        response.setHeader("Access-Control-Allow-Credentials", "true"); // 是否支持cookie跨域        
//        response.setHeader("XDomainRequestAllowed", "1");
//        filterChain.doFilter(servletRequest, servletResponse);
//
//    }
//
//    @Override
//    public void destroy() {
//
//    }
//}

webmvc

@Configuration
public class GlobalCorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")//所有接口都支持跨域
                .allowedOrigins("*")//所有地址都可访问
                .allowCredentials(true)
                .allowedMethods("*")//"GET","HEAD","POST","PUT","DELETE","OPTIONS"
                .maxAge(3600);//允许跨域时间
    }
}

配置方法3

public class GlobalCorsConfig {
    @Bean
    public CorsFilter corsFilter() {
        //1. 添加 CORS配置信息
        CorsConfiguration config = new CorsConfiguration();
        //放行哪些原始域
        config.addAllowedOrigin("*");
        //是否发送 Cookie
        config.setAllowCredentials(true);
        //放行哪些请求方式
        config.addAllowedMethod("*");
        //放行哪些原始请求头部信息
        config.addAllowedHeader("*");
        config.setMaxAge(Duration.ofHours(6));
        config.addExposedHeader("Content-Type");
        config.addExposedHeader("X-Requested-With");
        config.addExposedHeader("accept");
        config.addExposedHeader("Origin");
        config.addExposedHeader("Access-Control-Request-Method");
        config.addExposedHeader("Access-Control-Request-Headers");
        //2. 添加映射路径
        UrlBasedCorsConfigurationSource corsConfigurationSource = new UrlBasedCorsConfigurationSource();
        corsConfigurationSource.registerCorsConfiguration("/**", config);
        //3. 返回新的CorsFilter
        return new CorsFilter(corsConfigurationSource);
    }
    
    @Bean
    public FilterRegistrationBean corsFilterRegistration() {
        FilterRegistrationBean registration = new FilterRegistrationBean();
        registration.setFilter(corsFilter());
        registration.addUrlPatterns("/*");
        registration.setName("corsFilter");
        registration.setOrder(-99999);
        return registration;
    }
}

问题

has been blocked by CORS policy: Response to preflight request doesn‘t pass access control check 报错

由于浏览器将CORS请求分为两类：简单请求（simple request）和非简单请求（not-simple-request）。非简单请求会在正式通信之前，增加一次HTTP请求，称之为预检请求。浏览器会先发起OPTIONS方法到服务器，以获知服务器是否允许该实际请求。
这是在第一次预请求时候没有请求成功，预请求不成功。

第一，先找到后台对应的接口，让后台去检查接口是否有抛出异常但是没有正常捕获。
第二，前端vue中注意点是请求的时候有没有使用content-type:application/json还有qs.string()

链接：https://www.jianshu.com/p/a2fd613a825c

CORS支持所有类型的HTTP请求，是跨域HTTP请求的根本解决方案

JSONP只支持GET请求，JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据。

不管是Node中间件代理还是nginx反向代理，主要是通过同源策略对服务器不加限制。

前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SSO服务</title>
    <script type="text/javascript" src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="./login.js"></script>
</head>

<body>
    <h3>SSO登录 参数： {"account":"15029200344", "password":"123456", "captcha": "", "captchaType": 0}</h3>
    <form id="loginForm">
        <div>
            用户名：<input id="account" type="text" value="15029200344" size=30 placeholder="输入用户名"/>
            密码：<input id="password" type="password" value="123456" placeholder="输入密码"/>
            <button id="submit" type="button">登录</button>
        </div>
    </form>
</body>
</html>

$(function () {
    //给登录按钮绑定单击事件
    console.log("---start-----")

    var account = $("#account").val().trim();
    var password = $("#password").val().trim();
    console.log("account:" + account + ", password:" + password)
    var token = "";
    $("#submit").click(function () {
        //2.发送ajax请求，提交表单数据
        // $.post("/sso/login"), $("#loginForm").serialize(), function (data){ console.log(data) }
        var dataForm = {
            "account": account,
            "password": password,
            "captcha": "",
            "captchaType": 0
        }

        // http://localhost:8101/sso/login

        $.ajax({
            url: "/sso/login",
            type: "post",
            headers: {
                "Authorization": "Bearer " + token,
                "token": token
            },
            contentType: "application/json;charset=utf-8",
            //dataType: "json",
            data: JSON.stringify(dataForm),
            beforeSend: function(req){
                console.log(window.location)
                //console.log(req)
            },
            success: function (rsp) {
                //debugger
                console.log(JSON.stringify(rsp))

                if (rsp.code == 200) {
                    token = rsp.data.token
                    //window.location = "/index.html"
                }
            },
            error() {
                console.log("error1")
            }
        });
    });
});