如何在 Angular 17 中使用 http 基本身份验证来使用 Spring Security 对 Spring Boot Rest API 进行身份验证？

Question

出于在本地计算机上进行测试的目的，我想使用 http basic auth 对后端进行身份验证。当我将基本身份验证标头发送到端点时，我的前端收到 401 和 CORS 错误。将anyRequest().authenticated()更改为.permitAll()后，这些问题就消失了。

如果我在浏览器中直接访问 localhost:8080 （及其任何子路径），我会收到一个弹出窗口，提示输入用户名和密码，并且它的功能很好，可以直接在浏览器中访问 GET 请求，并且它可以正常工作在邮递员中也可以在仍然使用 .authenticated() 时提供凭据

@Bean
    public UserDetailsService users() {
        UserBuilder users = User.withDefaultPasswordEncoder();
        UserDetails user = users
                .username("user")
                .password("password")
                .authorities("USER")
                .build();
        UserDetails admin = users
                .username("admin")
                .password("password")
                .authorities("ADMIN")
                .build();
        return new InMemoryUserDetailsManager(user, admin);
    }

    @Bean
    public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
            http.csrf(csrf->csrf.disable())
            .authorizeHttpRequests((authorize) -> authorize
                .anyRequest().authenticated()
            )
            .httpBasic(Customizer.withDefaults());

        return http.build();

我在 Angular 中的 http 请求中包含的标头如下所示：

{
      headers: new HttpHeaders({
        'Content-type': 'application/json',
        'Authorization': 'Basic ' + btoa('admin:password')
      }

我的假设（缺乏证据）是需要发生某种类型的登录事件来维持会话。我的应用程序不能只是开始使用标头中的基本身份验证来调用端点，因为浏览器中会触发某种 CORS 问题。截图如下：

我想强调，如果我从 .authenticated() 更改为 .permitAll()，这个问题就会消失，所以我不确定断开连接在哪里，但任何指导和解释都会有帮助。

Answer 1

我假设您正在使用@CrossOrigin注释。

我怀疑问题是您不允许对您的端点进行“OPTIONS”调用。请参阅：如何在 Spring Boot 中配置 CORS 和基本授权？

（我没有测试过，是用手机写的）