vue axios + spring boot + spring security 跨域问题

1. 问题概述:

spring cloud config server, 做成数据库保存配置信息,然后有一堆删除改查的controller。

那么现在比如有这样一个/service/applications的RestController, 正常可以访问。

 

后来为了安全,加上了

1
2
3
4
5
6
7
spring:
  security:
    basic:
      enabled: true
    user:
      name: user
      password: password

然后在postman, 加上Authorization头, 访问也成功

可是,然后可是,到了axios, 就是各种不成功:

 

2. 原因:

浏览器会先发一个OPTIONS请求, 在这个请求里,会去掉Authorizaiton: Basic ....的头。这个和axios无关。

而spring cloud config server, 因为加上认证, 所以引入了spring security. 导致OPTIONS请求不成功。所以要对spring security进行配置,让它可以通过这个OPTIONS请求。

 

3. 解决方法:

所以除了要有以下配置:

复制代码
@Configuration
public class CorsConfig { 
    
    private CorsConfiguration buildConfig() {
        CorsConfiguration corsConfiguration = new CorsConfiguration(); 
        corsConfiguration.addAllowedOrigin("*"); 
        corsConfiguration.addAllowedHeader("*"); 
        corsConfiguration.addAllowedMethod("*"); 
        corsConfiguration.setAllowCredentials(true);
        return corsConfiguration; 
    } 
    
    @Bean 
    public CorsFilter corsFilter() { 
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); 
        source.registerCorsConfiguration("/**", buildConfig()); 
        return new CorsFilter(source); 
    }     
}
复制代码

还要有:(这个是重点,两个函数二选一即可)

 

1
2
3
4
5
6
7
8
9
10
11
12
13
@Configuration
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {
 
//  @Override
//  public void configure(HttpSecurity http) throws Exception {
//      http.cors();
//  }
 
    @Override
    public void configure(WebSecurity web) throws Exception {
        web.ignoring().antMatchers(HttpMethod.OPTIONS, "/**");
    }
}

 

这样就可以了。

 

2019.6.6 再补充一个,这个用的时候没有spring security, 不知道有了spring security会不会不好用。

复制代码
 1 @Configuration
 2 public class CorsConfig implements WebMvcConfigurer {    // java 8 不用使用 WebMvcConfigurerAdapter, 因为java 8的接口有默认实现,这个是eclipse提示的。
 3  
 4     @Override
 5     public void addCorsMappings(CorsRegistry registry) {
 6         System.out.println("----------------------");
 7         registry.addMapping("/**")
 8                 .allowedOrigins("*")
 9                 .allowCredentials(true)
10                 .allowedMethods("OPTIONS", "GET", "POST", "DELETE", "PUT")
11                 .maxAge(3600);
12     }
13 }
复制代码

 

2019.6.16  再补充一个interceptor版本的(因为使用了拦截器,导致上面那种(2019.6.6)配置无效, 这个没有使用spring security

复制代码
 1 public class JwtInterceptor extends HandlerInterceptorAdapter {
 2     
 3     @Override
 4     public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
 5         
 6         String origin = request.getHeader("Origin"); 
 7         response.setHeader("Access-Control-Allow-Origin", origin); 
 8         response.setHeader("Access-Control-Allow-Methods", "*"); 
 9         response.setHeader("Access-Control-Allow-Headers","Origin,Content-Type,Accept,token,X-Requested-With"); 
10         response.setHeader("Access-Control-Allow-Credentials", "true");
11         
12         String token = request.getHeader("MyToken");
13         if(token == null) {
14             throw new UserLoginException("用户未登录");
15         }
16         
17         JwtUtil.checkToken(token);
18         
19         return true;
20     }
21     
22         
23 }
复制代码

 

posted @   北极熊129  阅读(3222)  评论(0编辑  收藏  举报
(评论功能已被禁用)
编辑推荐:
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
阅读排行:
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· DeepSeek 解答了困扰我五年的技术问题。时代确实变了!
· 本地部署DeepSeek后,没有好看的交互界面怎么行!
· 趁着过年的时候手搓了一个低代码框架
· 推荐一个DeepSeek 大模型的免费 API 项目!兼容OpenAI接口!
点击右上角即可分享
微信分享提示