Угловая 2 Базовая аутентификация не работает

Question

Я пытаюсь подключиться/выполнить запрос POST в API с помощью Angular2, это очень простой API с базовым паролем аутентификации. При отключении пароля в api все работает так, как ожидалось. Но когда я включаю Basic Authentication Angular, больше нельзя подключаться к API. В Почтальоне все работает. Я пробовал следующее без успеха.

У меня есть два заголовка "Content-Type" и "Authorization"

headers.append("Content-Type", "application/x-www-form-urlencoded"); 

Я пробовал эти два заголовка.

headers.append("Authorization", "Basic " + btoa(Username + ":" + Password)); 
headers.append("Authorization", "Basic VXNlcm5hbWU6UGFzc3dvcmQ="); 

Единственное, что я могу найти, что в RAW заголовков запроса есть только строка с именами заголовка, но значения отсутствуют:

Access-Control-Request-Headers: authorization, content-type 

Необработанные заголовки:

#Request Headers 
OPTIONS /shipment HTTP/1.1 
Host: api.example.com 
Connection: keep-alive 
Access-Control-Request-Method: POST 
Origin: http://localhost:4200 
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.106 Safari/537.36 
Access-Control-Request-Headers: authorization, content-type 
Accept: */* 
Referer: http://localhost:4200/address 
Accept-Encoding: gzip, deflate, sdch 
Accept-Language: en-US,en;q=0.8,nl;q=0.6 

Надеюсь, что кто-то может помочь

Answer 1

Упрощенная версия для добавления пользовательских заголовков по вашему запросу:

import {Injectable} from '@angular/core'; 
import {Http, Headers} from '@angular/http'; 

@Injectable() 
export class ApiService { 

    constructor(private _http: Http) {} 

    call(url): Observable<any> { 
     let username: string = 'username'; 
     let password: string = 'password'; 
     let headers: Headers = new Headers(); 
     headers.append("Authorization", "Basic " + btoa(username + ":" + password)); 
     headers.append("Content-Type", "application/x-www-form-urlencoded"); 
     return this._http.post(url, data, {headers: headers}) 
    } 
} 

Это трудно определить, где вы пошли не так, потому что отсутствие кода фактического http вызова вы делаете. Но этот пример должен сработать для вас

Answer 2

У меня была такая же проблема в моем приложении.

Как вы можете увидеть запрос, который отослано не POST, но ВАРИАНТ (предварительно проверка)

https://developer.mozilla.org/fr/docs/HTTP/Access_control_CORS

Вы должны позволили OPTIONS запросить на вашей стороне API. Если у вас есть Spring приложение, вы можете просто добавить это к конфигурации Spring Security:

protected void configure(HttpSecurity http) throws Exception { 
     http.csrf().disable() 
       .authorizeRequests() 
       **.antMatchers(HttpMethod.OPTIONS, "/**").permitAll()** 
(..) 

} 

В моем случае это работает

Answer 3

Это решило мои проблемы:
Angular2 http post - how to send Authorization header?

Ok. Я нашел проблему.

Это было не на угловой стороне. Честно говоря, проблем не было.

Причина, по которой я не смог выполнить мою просьбу, был тем, что мое приложение-сервер неправильно обрабатывал запрос OPTIONS.

Почему ОПЦИИ, а не ПОЧТОВЫЕ? Мое серверное приложение находится на другом хосте, а затем в интерфейсе. Из-за CORS моего браузера был преобразование POST в ВАРИАНТ: http://restlet.com/blog/2015/12/15/understanding-and-using-cors/

С помощью этого ответа: Standalone Spring OAuth2 JWT сервера авторизация + CORS

Я реализовал надлежащий фильтр на моей стороне сервера приложениях.

Спасибо @Supamiu - человек, который меня пальцы, что я не отправляю POST вообще.

Answer 4

jrcastillo предложил другой вариант here

я провел так много часов пытаюсь это исправить, и это одна гильзы решить мою проблему.

@Override 
public void configure(WebSecurity web) throws Exception { 
    web.ignoring().antMatchers(HttpMethod.OPTIONS, "/**"); 
} 

Я был немного более конкретно, в конце концов, как это осуществить мой /логин путь, так что я сделал следующий вместо:

@Override 
public void configure(WebSecurity web) throws Exception { 
    web.ignoring().antMatchers(HttpMethod.OPTIONS, "/api/**"); 
} 

Answer 5

Проблема с сервером бэкэнда. Любой браузер отправляет запрос предполетного запроса, делающий запрос на перекрестный поиск. Бэкэнд-сервер в этом случае не обрабатывает запрос предварительной проверки. Попробуйте выполнить конфигурацию cors на сервере backend. Это решит проблему.