Angular2與彈簧靴和彈簧安全

Question

首先，我已經檢查了this page的問題，我嘗試了他的解決方案，但在最後，我仍然有同樣的問題。

XMLHttpRequest無法加載http://localhost:8080/login。 對預檢請求的響應未通過訪問控制檢查： 請求的資源上沒有「Access-Control-Allow-Origin」標頭。 原產地'http://localhost:3000'因此不允許訪問。 響應了HTTP狀態代碼403

不過，我把一個access-control無處不在，所以我不明白爲什麼是這樣的。

我的代碼看起來像這樣（我希望我會投入足夠的你）：

在轉角，我login.service.ts：

check(name: string, password: string): boolean { 
    let headers = new Headers(); 
    headers.append('Content-Type', 'application/x-www-form-urlencoded'); 
    headers.append('Access-Control-Allow-Origin','*'); 
    let options = new RequestOptions({headers:headers,withCredentials:true}); 

    if(this.http.post(this.baseUrl, 
     `username=${name}&password=${password}`, 
     {headers:headers}) 
     .toPromise().then(response=> { 
      return {} 
     })) 
     return true;  

     return false; 
    } 

我也想，如果認證成功返回一個布爾值，但我真的不知道如何知道它是否有效，所以我現在就這樣做（並且總是如此）。

然後，在Java中，我有這樣的代碼：

@Configuration 
@EnableWebMvc 
class WebConfig extends WebMvcConfigurerAdapter { 
} 

那麼對於安全，我得到這個：

@Configuration 
@EnableWebSecurity 
public class SecurityConfig extends WebSecurityConfigurerAdapter { 


    @Autowired 
    private RESTLoginSuccessHandler loginSuccessHandler; 

    @Autowired 
    private RestLogoutSuccessHandler logoutSuccessHandler; 

    @Override 
    protected void configure(HttpSecurity httpSecurity) throws Exception { 
     //deactivate CSRF and use custom impl for CORS 
     httpSecurity 
       .cors.and() 
       .csrf().disable() 
       .addFilterBefore(new CorsFilter(), ChannelProcessingFilter.class); 
     //authorize, authenticate rest 
     httpSecurity 
       .authorizeRequests() 
        .anyRequest().hasRole("USER") 
        .and() 
       .sessionManagement() 
        .sessionCreationPolicy(SessionCreationPolicy.IF_REQUIRED) 
        .and() 
       .formLogin() 
        .usernameParameter("username") 
        .passwordParameter("password") 
        .loginPage("/login") 
        .successHandler(loginSuccessHandler) 
        .permitAll() 
        .and() 
       .logout() 
        .logoutSuccessHandler(this.logoutSuccessHandler) 
        .permitAll(); 
    } 

    @Autowired 
    public void configureGlobal(AuthenticationManagerBuilder auth) throws Exception { 
     auth.inMemoryAuthentication().withUser("rano").password("1234").roles("USER"); 
     auth.inMemoryAuthentication().withUser("admin").password("admin").roles("USER", "ADMIN"); 
    } 
} 

@Bean 
CorsConfigurationSource corsConfigurationSource() { 
    CorsConfiguration configuration = new CorsConfiguration(); 

    configuration.setAllowedOrigins(Arrays.asList("http://localhost:8080","http://localhost:3000")); 

    configuration.setAllowedMethods(Arrays.asList("PUT","DELETE","POST")); 
    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); 
    source.registerCorsConfiguration("/**", configuration); 
    return source; 
} 

在我LoginSuccessHandler：

@Component 
public class RESTLoginSuccessHandler extends SimpleUrlAuthenticationSuccessHandler { 

    private RequestCache requestCache = new HttpSessionRequestCache(); 

    @Override 
    public void onAuthenticationSuccess(HttpServletRequest request, HttpServletResponse response, 
      org.springframework.security.core.Authentication authentication) throws IOException, ServletException { 

     SavedRequest savedRequest = requestCache.getRequest(request, response); 

     if (savedRequest == null) { 
      clearAuthenticationAttributes(request); 
      return; 
     } 

     String targetUrlParam = getTargetUrlParameter(); 
     if (isAlwaysUseDefaultTargetUrl() 
       || (targetUrlParam != null && StringUtils.hasText(request.getParameter(targetUrlParam)))) { 
      requestCache.removeRequest(request, response); 
      clearAuthenticationAttributes(request); 
      return; 
     } 

     clearAuthenticationAttributes(request); 
    } 

    public void setRequestCache(RequestCache requestCache) { 
     this.requestCache = requestCache; 
    } 
} 

所以，任何想法是什麼問題？或者關於如何使用Spring Boot和Spring Security創建Angular2應用程序？因爲除了當我添加安全性時，所有東西都可以在Spring Boot和Angular之間使用。

Answer 1

以下內容添加到您的配置方法

.cors().and()