Основной заголовок авторизации, снятый для запроса oauth/token

Question

У меня есть серьезная проблема с моей авторизацией Oauth2, и я медленно отказываюсь после четырех вечеров, поэтому я надеюсь, что кто-то может мне помочь.

Клиент: У меня есть клиент Angular2 как отдельный проект front-end. Я знаю, как должно выглядеть сообщение oauth/token, потому что я уже тестировал его с помощью Postman. Дело в том, что заголовок авторизации разделяется и не доходит до сервера. Примечание. Я добавил эти заголовки Access-Control в отчаянные попытки заставить его работать. Я не уверен, если это делает никакой разницы ...

let headers = new Headers(); 
headers.append('Content-Type', 'application/x-www-form-urlencoded; charset=utf-8'); 
headers.append('Accept', 'application/json'); 
headers.append('Access-Control-Allow-Origin', '*'); 
headers.append('Access-Control-Allow-Headers', 'Authorization'); 
headers.append('Authorization', 'Basic ' + Base64.encode('angularApp:theBiggestSecret')); 

let options = new RequestOptions({ headers: headers }); 

this.http.post(`${this.baseUrl}oauth/token`, "grant_type=password&scope=read&username=test&password=test&client_id=angularApp&client_secret=theBiggestSecret", headers) 
    .subscribe(
    response => console.log(response) 
); 

}

Сервер: У меня есть Spring MVC приложение, запущенное с "WebApplicationInitializer", с springSecurityFilterChain зарегистрирован прямо в Initializer. Вся конфигурация выполняется через аннотации, без содержимого webapp. Начинается во встроенной пристани.

Я настроил как AuthorizationServer, так и ResourceServer в одном приложении, я настроил CorsFilter в SecurityConfiguration через http.addFilterBefore, и я вижу, что он работает.

Проблема: Ну, мой заголовок авторизации все еще получает раздел, поэтому базовая аутентификация не работает, и я не получаю, что маркер доступа. Тем не менее, я считаю, что CORS правильно работает прямо сейчас, я не получаю CORS связанных ошибок в браузере, и я могу видеть это как заголовки ответа:

HTTP/1.1 401 Unauthorized 
Date: Fri, 23 Sep 2016 21:41:34 GMT 
Access-Control-Allow-Origin: * 
Vary: Origin 
Access-Control-Expose-Headers: Authorization, Content-Type 
Cache-Control: no-store 
Pragma: no-cache 
WWW-Authenticate: Bearer error="unauthorized", error_description="There is no client authentication. Try adding an appropriate authentication filter." 
Content-Type: application/json;charset=UTF-8 
X-Content-Type-Options: nosniff 
X-XSS-Protection: 1; mode=block 
Transfer-Encoding: chunked 
Server: Jetty(9.3.11.v20160721) 

Это то, что отправляется в запросе:

POST /oauth/token HTTP/1.1 
Host: localhost:8080 
Connection: keep-alive 
Content-Length: 115 
Origin: http://localhost:4200 
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.116 Safari/537.36 
content-type: text/plain 
Accept: */* 
Referer: http://localhost:4200/ 
Accept-Encoding: gzip, deflate 
Accept-Language: cs-CZ,cs;q=0.8,en;q=0.6 

Answer 1

Вы не устанавливаете headers должным образом в методе post().

Вы можете это исправить, делая это:

this.http.post(`${this.baseUrl}oauth/token`, '<form data>', { headers: headers }) 
    .subscribe(response => console.log(response)); 

Вы также можете создавать свои данные формы в URLSearchParams объекта и установить его, как тело, так что Угловая автоматически установит тип контента application/x-www-form-urlencoded для вас.

let body = new URLSearchParams(); 
body.set('grant_type', 'password'); 
body.set('scope', 'read'); 
body.set('username', 'test'); 
body.set('password', 'test'); 
body.set('client_id', 'angularApp'); 
body.set('client_secret', 'theBiggestSecret'); 

this.http.post(`${this.baseUrl}oauth/token`, body, { headers: headers }) 
     .subscribe(response => console.log(response));