Angular2, доступ к REST с помощью Basic Auth throws «Ответ на предполетный период имеет неверный код статуса HTTP 401»

Question

В настоящее время мы пытаемся получить доступ к REST-Endpoint приложения Spring Boot в приложении Angular2, но, несмотря на то, что заголовок авторизации работает в Postman (Authorization/Basic dXNlcjp1c2Vy, для базового тестового пользователя с пользователем пароля), он не работает, когда приложение пытается получить доступ к REST-Endpoint. Спринг-Security настроен так:

@Configuration 
@EnableGlobalMethodSecurity(prePostEnabled = true) 
public class ApplicationSecurity extends WebSecurityConfigurerAdapter { 

@Override 
protected void configure(AuthenticationManagerBuilder builder) throws Exception { 
    builder.inMemoryAuthentication().withUser("user").password("user").roles("USER").and().withUser("admin") 
      .password("admin").roles("ADMIN"); 
} 

@Override 
protected void configure(HttpSecurity http) throws Exception { 
    http.authorizeRequests().anyRequest().fullyAuthenticated(); 
    http.httpBasic(); 
    http.csrf().disable(); 
} 

}

Угловая приложение запрашивает учетные данные, прежде чем сделать первый запрос, например, так:

loginTest() { 
    let headers: Headers = new Headers({'Content-Type': 'application/json', 'Accept': 'application/json'}); 
    headers.append('Authorization', 'Basic ' + window.btoa(this._username + ':' + this._password)); 
    console.log(headers); 
    return this.http.get('http://localhost:8080/', {headers: headers}) 
     .map((res:any) => res.json); 
} 

С локального хоста: 8080 является Весенняя загрузка. Мы уже пытались добавить тег Content-политика, потому что были аналогичные проблемы с более ранним проектом, как так:

<meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'unsafe-inline' 'unsafe-eval' 'self'; 
connect-src 'self' http://localhost:3000/ http://localhost:8080/ ws://localhost:3000/; img-src 'self' data:; 
style-src 'unsafe-inline' 'self'; font-src 'self'"/> 

, но это не сработало. Ошибка мы получаем:

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

При поиске по запросу через Chrome, это ответ:

HTTP/1.1 401 Unauthorized 
Server: Apache-Coyote/1.1 
X-Content-Type-Options: nosniff 
X-XSS-Protection: 1; mode=block 
Cache-Control: no-cache, no-store, max-age=0, must-revalidate 
Pragma: no-cache 
Expires: 0 
X-Frame-Options: DENY 
Set-Cookie: JSESSIONID=4659A74A950FE6C99948D8F4CB245E27; Path=/; HttpOnly 
WWW-Authenticate: Basic realm="Realm" 
Access-Control-Allow-Origin: http://localhost:3000 
Vary: Origin 
Access-Control-Allow-Methods: GET 
Access-Control-Allow-Headers: accept, authorization, content-type 
Access-Control-Allow-Credentials: true 
Allow: GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS, PATCH 
Content-Length: 0 
Date: Mon, 04 Jul 2016 07:54:30 GMT 

Я не вижу, что Angular2-App делает отличается по сравнению с Почтальон Вот.

Answer 1

Я думаю, что ваша проблема связана с CORS. Postman - это хром-плагин, поэтому он имеет разрешение на выполнение запросов CORS. Это не относится к вашему угловому приложению: он более ограничен.

Смотрите этот вопрос:

• how Postman send requests? ajax, same origin policy

В случае Угловое, вам нужно работать с CORS. Перед отправкой фактического запроса у вас есть предпроданный запрос (ОПЦИИ). Я думаю, что в вашем случае учетные данные не отправляются в этот предпроданный запрос, поэтому сервер не может его аутентифицировать и возвращает код состояния 401. Это предотвращает выполнение целевого запроса.

Я вижу два решения:

• Используйте withCredentials параметров истинным (доступен в Angular2 от RC2)

  this.http.get('http://...', { withCredentials: true })... 
  

• только проверить безопасность на целевых запросов, а не на preflighted них. Это конфигурация, выполняемая на стороне сервера.

Смотрите эти статьи для более подробной информации:

• http://restlet.com/blog/2015/12/15/understanding-and-using-cors/
• http://restlet.com/blog/2016/09/27/how-to-fix-cors-problems/