zoukankan      html  css  js  c++  java
  • vue axios + spring boot + spring security 跨域问题

    1. 问题概述:

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

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

    后来为了安全,加上了

    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); 
        }     
    }

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

    @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 }
  • 相关阅读:
    angular设置反向代理
    typescript设置全屏
    解决TS报错Property 'style' does not exist on type 'Element'
    安全错误使用CORS在IE10与Node和Express及XMLHttpRequest: 网络错误 0x4c7, 操作已被用户取消
    vue axios 请求 https 的特殊处理
    SQL Server 查询基础及分组(每三个小时一组)
    SQL Server 表结构操作
    SQL Server 存储过程T-SQL基础语法
    .Net Core 使用Http请求及基于 Polly 的处理故障
    .Net Core 通用主机(Core 在控制台应用程序中的应用)
  • 原文地址:https://www.cnblogs.com/bear129/p/10639864.html
Copyright © 2011-2022 走看看