首页 > 其他分享 >前后端分离解决跨域问题

前后端分离解决跨域问题

时间:2022-11-16 16:49:04浏览次数:48  
标签:分离 浏览器 跨域 前后 访问 服务器 允许 请求

跨域操作过程:

1.浏览器在发起请求之前,获取请求路径中协议、ip、端口,判断当前这3个数据跟当前服务器是否一致,一旦发现不一致,那么会马上执行跨域访问操作

2.浏览器马上发起 预请求 到接口服务器,询问是否允许当前服务器跨域访问,注意:url 跟真实请求一样,请求方法是:OPTIONS

3.接口服务器接收到这个预请求,解析预请求,获取ip 端口 路径。跟之前事先配置好跨域允许配置进行匹配,如果匹配成功,返回允许跨域访问信息

4.浏览器接收到预请求响应回来的信息,解析,如果是允许跨域访问,马上执行真实请求,如果是不允许跨域访问,提示跨域访问失败信息

5.如果浏览器没有接收到响应数据,或者解析不出允许跨域访问信息,都提示跨域访问失败信息

启动类或者配置类添加

//跨域访问
@Bean
public WebMvcConfigurer corsConfigurer() {
    return new WebMvcConfigurer() {
        @Override
        //重写父类提供的跨域请求处理的接口
        public void addCorsMappings(CorsRegistry registry) {
            //添加映射路径
            registry.addMapping("/**")
                //放行哪些原始域
                //                        .allowedOrigins("*")
                .allowedOriginPatterns("*")
                //是否发送Cookie信息
                .allowCredentials(true)
                //放行哪些原始域(请求方式)
                .allowedMethods("GET", "POST", "PUT", "DELETE","OPTIONS")
                //放行哪些原始域(头部信息)
                .allowedHeaders("*")
                //暴露哪些头部信息(因为跨域访问默认不能获取全部头部信息)
                .exposedHeaders("Header1", "Header2");
        }
    };
}

标签:分离,浏览器,跨域,前后,访问,服务器,允许,请求
From: https://www.cnblogs.com/LLW521/p/16896417.html

相关文章