Access to XMLHttpRequest at 'http://localhost:8081/equipment' from origin 'http://localhost:3000' has been blocked by CORS policy

Question

Spring Code from the Backend

@Configuration
@EnableWebSecurity
public class OAuth2Configuration extends WebSecurityConfigurerAdapter {

@Override
protected void configure(HttpSecurity http) throws Exception {
    final String corsOrigin = "http://localhost:3000";
    http.addFilterBefore(new CorsFilter(corsConfigurationSource(corsOrigin)), AbstractPreAuthenticatedProcessingFilter.class);
}
  private CorsConfigurationSource corsConfigurationSource(String corsOrigin) {
    CorsConfiguration configuration = new CorsConfiguration();
    configuration.setAllowedOrigins(Arrays.asList(corsOrigin));
    configuration.setAllowedMethods(Arrays.asList("GET", "POST", "HEAD", "OPTIONS", "PUT", "PATCH", "DELETE"));
    configuration.setMaxAge(10L);
    configuration.setAllowedHeaders(Arrays.asList("Accept", "Access-Control-Allow-Headers", "Access-Control-Allow-Origin", "Access-Control-Request-Method", "Access-Control-Request-Headers",
             "Authorization", "Content-Type", "Origin"));
    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    source.registerCorsConfiguration("/**", configuration);
    return source;
}

}

And the Axios Vue3 Code

import axios from 'axios'
const api = axios.create({
  baseURL: 'http://localhost:8081',
  headers: {
    'Content-Type': 'application/json',
  },
})

export default api

XHRPOSThttp://localhost:8081/equipment CORS Missing Allow Origin

POST http://localhost:8081/equipment Status 403 VersionHTTP/1.1 Transferred539 B (120 B size) Referrer Policystrict-origin-when-cross-origin

Cache-Control no-cache, no-store, max-age=0, must-revalidate Connection keep-alive Content-Type application/json Date Thu, 19 May 2022 19:38:26 GMT Expires 0 Keep-Alive timeout=60 Pragma no-cache Set-Cookie JSESSIONID=77976887FAF4420F90ED78DBA88191C3; Path=/; HttpOnly Transfer-Encoding chunked X-Content-Type-Options nosniff X-Frame-Options DENY X-XSS-Protection 1; mode=block

Accept application/json, text/plain, / Accept-Encoding gzip, deflate Accept-Language en-US,en;q=0.5 Connection keep-alive Content-Length 23 Content-Type application/json Host localhost:8081 Origin http://localhost:3000 Referer http://localhost:3000/ Sec-Fetch-Dest empty Sec-Fetch-Mode cors Sec-Fetch-Site same-site User-Agent Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:97.0) Gecko/20100101 Firefox/97.0

I get this cors error and really dont know anymore what to do please help

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8081/equipment. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 403.