使用 Spring Boot 和 Angular 的 CORS 策略

问：

我正在开发一个必须登录到 SpringBoot 应用程序的 Angular 应用程序。后端的结构是使用用户名和密码执行身份验证，并在经过身份验证时将 JWT 令牌返回给前端。

当我使用 postman 时，此结构有效，如下所示。在此处输入图像描述 在此处输入图像描述

但是，当我使用应用程序发出这些请求时，会生成 CORS 策略错误。在此处输入图像描述这是我的 Angular 组件：import { Component } from '@angular/core';

import { FormsModule } from '@angular/forms';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-loginscreen',
  templateUrl: './loginscreen.component.html',
  styleUrls: ['./loginscreen.component.css']
})
export class LoginscreenComponent {
  constructor(private httpClient: HttpClient) { }
  public inputUsername: string = "";
  public inputPassword: string = "";


  login() {
    // preparar requisição http
    // Suponhamos que você tenha uma URL e os dados de login
  const url = 'http://localhost:8080/auth/login';
  const dadosDeLogin = {
    username: this.inputUsername,
    password: this.inputPassword
  };
  const headers = { 'content-type': 'application/json'}  


  this.httpClient.post(url, dadosDeLogin, { headers })
  .subscribe(data => {
    console.log(data);
  })
 
  }

 

}

这是我的 SecurityFilter 类：

@Component
public class SecurityFilter extends OncePerRequestFilter {
    @Autowired
    TokenService tokenService;
    @Autowired
    AdministratorRepository administratorRepository;

    @Override
    protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOException {
        var token = this.recoverToken(request);
        if(token != null){
            var login = tokenService.validateToken(token);
            UserDetails user = administratorRepository.findByUsername(login);

            // Requests CORS
            response.setHeader("Access-Control-Allow-Origin", "http://localhost:4200");
            response.setHeader("Access-Control-Allow-Credentials", "true");
            response.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, OPTIONS, DELETE, PATCH");
            response.setHeader("Access-Control-Allow-Headers", "Content-Type, Authorization");


            var authentication = new UsernamePasswordAuthenticationToken(user, null, user.getAuthorities());
            SecurityContextHolder.getContext().setAuthentication(authentication);
        }
        filterChain.doFilter(request, response);
    }

    private String recoverToken(HttpServletRequest request) {
        var authHeader = request.getHeader("Authorization");
        if(authHeader == null) return null;
        return authHeader.replace("Bearer ", "");
    }
}

这是我的 SecurityConfig 类：

@Configuration
@EnableWebSecurity
public class SecurityConfig {
    @Autowired
    SecurityFilter securityFilter;
    @Bean
    public SecurityFilterChain securityFilterChain(HttpSecurity httpSecurity) throws Exception {
        return httpSecurity
                .csrf(csrf -> csrf.disable())
                .sessionManagement(session -> session.sessionCreationPolicy(SessionCreationPolicy.STATELESS))
                .authorizeHttpRequests(authorize -> authorize
                        .requestMatchers(AntPathRequestMatcher.antMatcher(HttpMethod.POST, "/auth/login")).permitAll()
                        .requestMatchers(AntPathRequestMatcher.antMatcher(HttpMethod.POST, "/auth/register")).permitAll()
                        .requestMatchers(AntPathRequestMatcher.antMatcher(HttpMethod.POST, "/users")).hasRole("ADMIN")
                        .anyRequest().authenticated()
                )
                .addFilterBefore(securityFilter, UsernamePasswordAuthenticationFilter.class)
                .build();
    }

    @Bean
    public AuthenticationManager authenticationManager(AuthenticationConfiguration authenticationConfiguration) throws Exception {
        return authenticationConfiguration.getAuthenticationManager();
    }

    @Bean
    public PasswordEncoder passwordEncoder(){
        return new BCryptPasswordEncoder();
    }
}

我已经尝试了几种方法通过在后端设置 CORS 策略来消除此错误，但似乎没有任何效果。你可以帮我吗？

我尝试通过后端启用跨源