401當我嘗試將我的角JS連接到Spring Boot

Question

我在webstorm上創建了一個客戶端角度，並且我在Eclipse上有一個Spring Boot服務器。問題是，當我嘗試打開會話我收到此錯誤信息：

OPTIONS http://localhost:8080/allquestions 401() 
(anonymous) @ angular.js:12410 
p @ angular.js:12155 
(anonymous) @ angular.js:11908 
(anonymous) @ angular.js:16648 
$eval @ angular.js:17972 
$digest @ angular.js:17786 
$apply @ angular.js:18080 
(anonymous) @ angular.js:19924 
f @ angular.js:6111 
(anonymous) @ angular.js:6390 


XMLHttpRequest cannot load http://localhost:8080/allquestions. Response for preflight has invalid HTTP status code 401 

的WebConfig

@EnableWebMvc 
@Configuration 
@ComponentScan 
public class WebConfig extends WebMvcConfigurerAdapter { 

public WebConfig() { 
    super(); 
} 

@Override 
public void addViewControllers(ViewControllerRegistry registry) { 
    registry.addViewController("/login").setViewName("login"); 
    registry.addViewController("/").setViewName("welcome"); 
    registry.addViewController("/welcome").setViewName("welcome"); 
    registry.addViewController("/exam").setViewName("exam"); 
    registry.addViewController("/report").setViewName("report"); 
    registry.addViewController("/error").setViewName("error"); 
    registry.addViewController("/editing").setViewName("editing"); 
} 

@Override 
public void addResourceHandlers(final ResourceHandlerRegistry registry) { 
    super.addResourceHandlers(registry); 
    registry.addResourceHandler("/images/**").addResourceLocations("/images/"); 
    registry.addResourceHandler("/css/**").addResourceLocations("/css/"); 
    registry.addResourceHandler("/js/**").addResourceLocations("/js/"); 
} 

控制器的一部分：

@RestController 
public class HomeController { 

@Autowired 
private BusinessModel businessModel; 
private List<String> messages; 

private User currentUser; 

@PostConstruct 
public void init() { 
    messages = businessModel.getMessages(); 
} 

// Communicate informations to client 
private void sendOptions(HttpServletResponse response) { 
    if (businessModel.getCorsNeeded().booleanValue()) { 
     // Fix the header CORS 
     response.addHeader("Access-Control-Allow-Origin", "*"); 
     // Header Authorization 
     response.addHeader("Access-Control-Allow-Headers", "Authorization"); 
    } 
} 

// questions list via OPTIONS 
@RequestMapping(value = "/allquestions", method = RequestMethod.OPTIONS) 
public void getAllQuestions(HttpServletResponse response) { 
    sendOptions(response); 
} 

的SecurityConfig：

@Configuration 
@EnableWebSecurity 
public class SecurityConfig extends WebSecurityConfigurerAdapter { 

@Autowired 
private UsersService usersService; 

@Override 
protected void configure(HttpSecurity http) throws Exception { 
    http.httpBasic(); 
    http.authorizeRequests().antMatchers("/login").permitAll().antMatchers("/**").hasRole("USER").and().formLogin() 
      .loginPage("/login").and().logout(); 
} 

@Override 
protected void configure(AuthenticationManagerBuilder auth) throws Exception { 
    auth.userDetailsService(usersService).passwordEncoder(new BCryptPasswordEncoder()); 
} 
} 

我可以' t添加xml文件（限制我的工作環境）...

我完全被封鎖，我需要你的幫助！

Answer 1

適合每個人的解決方案！

您創建一個過濾器誰可以讓排序：

公共類CorsFilter實現過濾器{

@Override 
    public void destroy() { 
    } 

    @Override 
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain filter) 
      throws IOException, ServletException { 
     HttpServletResponse httpResponse = (HttpServletResponse) response; 
     httpResponse.setHeader("Access-Control-Allow-Origin", "*"); 
     httpResponse.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE"); 
     httpResponse.setHeader("Access-Control-Max-Age", "3600"); 
     httpResponse.setHeader("Access-Control-Allow-Headers", "Authorization"); 
     filter.doFilter(request, response); 
    } 

    @Override 
    public void init(FilterConfig arg0) throws ServletException { 
    } 

} 

可以看到，過濾器爲您創建的所有頭。最想要的：httpResponse.setHeader（「Access-Control-Allow-Origin」，「」*）。

然後，你可以調用過濾器在SecurityConfig：

@EnableAutoConfiguration 
@EnableWebSecurity 
public class SecurityConfig extends WebSecurityConfigurerAdapter { 

    @Autowired 
    private UsersService usersService; 

    @Override 
    protected void configure(HttpSecurity http) throws Exception { 
     http.addFilterBefore(new CorsFilter(), ChannelProcessingFilter.class); 
     http.csrf().disable(); 
     http.httpBasic(); 
     http.authorizeRequests().antMatchers(HttpMethod.OPTIONS, "/", "/**").permitAll(); 
     http.authorizeRequests().antMatchers(HttpMethod.GET, "/", "/**").permitAll(); 
     //http.authorizeRequests().antMatchers("/login").permitAll().antMatchers("/**").hasRole("USER").and().formLogin().loginPage("/login").and().logout(); 
    } 

    @Override 
    protected void configure(AuthenticationManagerBuilder auth) throws Exception { 
     auth.userDetailsService(usersService).passwordEncoder(new BCryptPasswordEncoder()); 
    } 
} 

在那裏，你可以看到過濾器是正確的請求之前撥打電話：http.addFilterBefore（新CorsFilter（），ChannelProcessingFilter.class）。

這是我找到的最好的解決方案，唯一適用於我的作品！我希望它能幫助你！