Angular 基本身份验证 Spring Boot

Posted 2023-02-27

【中文标题】Angular 基本身份验证 Spring Boot

【英文标题】：Angular Basic Auth Spring Boot

【发布时间】：2019-04-25 12:20:32

【问题描述】：

我使用 angular 7 和 spring boot 2.1.0 处理本教程 https://spring.io/guides/tutorials/spring-security-and-angular-js/#_sso_with_oauth2_angular_js_and_spring_security_part_v

我在前端的身份验证功能如下所示：

  private api = 'http://localhost:8080/v1/api';

  authenticate(credentials): Observable<User> 
    const headers = new HttpHeaders(credentials ? 
      authorization: 'Basic ' + btoa(credentials.username + ':' + credentials.password)
     : );

    return this.http.get<User>(`$this.api/user`, headers: headers)
      .pipe(
        retry(3),
        map(user => this.currentUser = user),
        catchError(this.errorHandler)
      );
  

我的安全配置是这样的：

@Throws(Exception::class)
override fun configure(http: HttpSecurity) 
    http.cors()
            .and().httpBasic()
            .and().authorizeRequests().antMatchers("/index.html", "/", "/home", "/login").permitAll()
            .anyRequest().authenticated()
            .and().csrf().disable()


@Bean
fun corsConfigurationSource(): CorsConfigurationSource 
    val configuration = CorsConfiguration()
    configuration.allowedOrigins = Arrays.asList("http://localhost:4200")
    configuration.allowedMethods = Arrays.asList("GET", "POST", "PUT", "PATCH", "DELETE", "OPTIONS")
    configuration.allowedHeaders = Arrays.asList("authorization", "content-type", "x-auth-token")
    configuration.exposedHeaders = Arrays.asList("x-auth-token")
    val source = UrlBasedCorsConfigurationSource()
    source.registerCorsConfiguration("/**", configuration)
    return source

我的浏览器会发送一个带有以下标题的 OPTIONS：

Accept  text/html,application/xhtml+xm…plication/xml;q=0.9,*/*;q=0.8 
Accept-Encoding gzip, deflate 
Accept-Language de,en-US;q=0.7,en;q=0.3 
Access-Control-Request-Headers  authorization,x-requested-with 
Access-Control-Request-Method   GET 
Cache-Control   no-cache 
Connection  keep-alive 
Host    localhost:8080 
Origin  http://localhost:4200 
Pragma  no-cache 
Referer http://localhost:4200/login 
User-Agent  Mozilla/5.0 (Windows NT 10.0; …) Gecko/20100101 Firefox/64.0

Spring Boot 回答 200 OK

Access-Control-Allow-Headers    authorization
Access-Control-Allow-Methods    GET,POST,PUT,PATCH,DELETE,OPTIONS
Access-Control-Allow-Origin http://localhost:4200
Access-Control-Expose-Headers   x-auth-token
Cache-Control   no-cache, no-store, max-age=0, must-revalidate
Content-Length  0
Date    Thu, 22 Nov 2018 19:43:53 GMT
Expires 0
Pragma  no-cache
Vary    Origin
Vary    Access-Control-Request-Method
Vary    Access-Control-Request-Headers
X-Content-Type-Options  nosniff
X-Frame-Options DENY
X-XSS-Protection 1; mode=block

据我了解，浏览器应该在之后发送带有 auth 标头的 get 请求吗？但是什么也没发生……怎么了？

谢谢

【参考方案1】：

好的，明白了：

将弹簧配置更改为

http.cors()
        .and().httpBasic()
        .and().authorizeRequests().antMatchers("/index.html", "/", "/home", "/login").permitAll()
        .anyRequest().authenticated()
        .and().csrf().csrfTokenRepository(CookieCsrfTokenRepository.withHttpOnlyFalse());

并将 HttpClientXsrfModule 添加到我的 Angular 应用程序中。不是很好用。

【讨论】：

它也应该适用于您在问题中的配置。您只添加了 CSRF，但这与 CORS 无关。真正的问题在客户端。您的客户端修复应该足够了。

是的，我也可以使用 HttpClientXsrfModule.disabled() 函数...但我猜使用 csrf 会好得多