Springboot解决ajax跨域问题

lazy_x

已于 2023-04-09 20:46:28 修改

阅读量427

点赞数

CC 4.0 BY-SA版权

分类专栏： springboot 文章标签： spring boot java ajax跨域问题

于 2021-12-15 10:54:07 首次发布

本文链接：https://blog.youkuaiyun.com/lazy_x/article/details/121947033

springboot 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了解决SpringBoot项目中Vue前端通过AJAX与后端通信时遇到的跨域问题，重点讲述了如何在Spring Security中添加跨域处理函数，包括配置`OPTIONS`请求允许、设置CORS策略，确保在启用JWT认证后仍能正常工作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述： 本人在做springboot项目时，前端用的是vue框架，然后使用ajax与后端通信，但是前端首先会发一个Option跨域请求，我的后端没有对这个进行处理，前端具体报错见下图。由于我后端加了security jwt token机制，所以网上其他人的解决方案都缺少了security类的具体设置，导致还是会跨域，查询了大量资料后发现只需要在security上加一些字段就可以解决，亲测有效。
请添加图片描述
解决方案

在security中添加跨域处理函数

@Configuration
public class SecurityConfig extends WebSecurityConfigurerAdapter {
	
	//...省略

    @Override
    protected void configure(AuthenticationManagerBuilder auth) throws Exception {

        auth.userDetailsService(userDetailsService());
    }
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        //使用JWT，不需要csrf
        http.csrf()
                .disable()
                //基于token，不需要session
                .sessionManagement()
                .sessionCreationPolicy(SessionCreationPolicy.STATELESS)
                .and()
                .authorizeRequests()
                //允许所有跨域验证的option请求
                .antMatchers(HttpMethod.OPTIONS).permitAll() //允许所有options请求，即js跨域请求不拦截
                //允许登录和注册访问
                .antMatchers("/user/login","/user/register","/user/captcha").permitAll()
                //除上面外，所有请求都要求认证
                .anyRequest()
                .authenticated()
                .and()
                //设置javascript跨域验证配置，
                .cors().configurationSource(CorsConfigurationSource())
                .and()
                //禁用缓存
                .headers()
                .cacheControl();
        //添加jwt 登录授权过滤器
        http.addFilterBefore(jwtAuthenticationTokenFilter(), UsernamePasswordAuthenticationFilter.class);
        //添加自定义未授权和未登录结果返回
        http.exceptionHandling()
                .accessDeniedHandler(restfulAccessDeniedHandler)
                .authenticationEntryPoint(restAuthenticationEntryPoint);
    }



    private CorsConfigurationSource CorsConfigurationSource() {
        CorsConfigurationSource source =   new UrlBasedCorsConfigurationSource();
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*");	//同源配置，*表示任何请求都视为同源，若需指定ip和端口可以改为如“localhost：8080”，多个以“，”分隔；
        corsConfiguration.addAllowedHeader("*");//header，允许哪些header，本案中使用的是token，此处可将*替换为token；
        corsConfiguration.addAllowedMethod("*");	//允许的请求方法，PSOT、GET等
        ((UrlBasedCorsConfigurationSource) source).registerCorsConfiguration("/**",corsConfiguration); //配置允许跨域访问的url
        return source;
    }
}