您的位置 首页 java

关于前后端分离中CORS跨域问题

在前后端分离中,前端的域或端口与后端的域或端口不一致的情况下,浏览器默认会阻止前端请求后端,因此我们为了使前端请求能够得到服务器响应并返回数据,需要做一些设置。

基于springboot+vue

一.CORS服务器端设置

 @Configuration
public class MyConfig implements WebMvcConfigurer {
    //静态资源URI和位置映射
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/static/**")
                .addResourceLocations("classpath:/static/")
                //设置静态资源缓存1年
                .setCachePeriod(3153600);
    }
    // CORS设置,任何请求,任何来源,任何方法,任何头,允许凭证
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("*")
                .allowedHeaders("*")
                .allowCredentials(true).maxAge(3600);
    }
}  

另外,如果采用了springSecurity,则需要进一步进行安全设置,重点内容如下,需要安全级别中启用CORS

//使用Spring Security,请确保在Spring安全级别启用CORS
.cors()

 @EnableWebSecurity
public class MySecurityConfig extends WebSecurityConfigurerAdapter {
    private MyUserDetalisService myUserDetalisService;
    public MySecurityConfig(MyUserDetalisService myUserDetalisService) {
        this.myUserDetalisService = myUserDetalisService;
    }
 
    //http安全配置
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.authorizeRequests()  //所有请求拦截
                .antMatchers("/static/**").permitAll() //放在所有拦截的前面放行不需要拦截的资源
                .antMatchers("/login").permitAll()  //放行登录
                .antMatchers("/logout").permitAll() //放行注销
                .antMatchers("/reg").hasAnyAuthority("REGUSER")//此页需要权限
                .anyRequest().authenticated() //除上所有拦截需要用户认证
                .and()
                .formLogin().loginProcessingUrl("/login")
                //登录成功后的返回结果
                .successHandler(new AuthenticationSuccessHandlerImpl())
                //登录失败后的返回结果
                .failureHandler(new AuthenticationFailureHandlerImpl())
                .and()
                .logout().logoutUrl("/logout")
                //登出后的返回结果
                .logoutSuccessHandler(new LogoutSuccessHandlerImpl())
                .and()
                //使用Spring Security,请确保在Spring安全级别启用CORS
                .cors().and()
                .csrf().disable(); //关闭csrf校验
 
    }
    //认证管理器配置
    @Override
    protected void configure(AuthenticationManagerBuilder auth) throws Exception {
        auth.userDetailsService(myUserDetalisService)
                //查询时需要密码加密后和数据库做比较
                .passwordEncoder(new BCryptPasswordEncoder());
    }
}  

二、前端中

在axios配置中也需要启用凭证,否则axios请求会被后端安全拦截,转向/login请求

 axios.defaults.withCredentials = true  

文章来源:智云一二三科技

文章标题:关于前后端分离中CORS跨域问题

文章地址:https://www.zhihuclub.com/181863.shtml

关于作者: 智云科技

热门文章

网站地图