rxjs5 Observable.ajax ignoriert explizit gesetzte HTTP-Header

Question

Ich bekomme meine Füße nass mit Redax-Observable und OAuth2-Authentifizierung. Ich bin an dem Punkt fest, wo ich POST Autorisierungsheader zu meiner HTTP-Anfrage hinzufügen muss. Der Header wurde nicht hinzugefügt. Stattdessen sehe ich irgendwelche benutzerdefinierten Headernamen als Werte von Access-Control-Request-Header, und das war's.

Dies ist ein redux beobachtbare 'Epos':

const epicAuth = function(action$){ 
    return action$.ofType(DO_AUTHENTICATE) 
    .mergeMap(
     action => Rx.Observable.ajax(authRequest(action.username, action.password)) 
     .map(response => renewTokens(response)) 
     .catch(error => Rx.Observable.of({ 
      type: AJAX_ERROR, 
      payload: error, 
      error: true, 
     })) 
    ) 
} 

Das ist mein Wunsch-Objekt:

const authRequest = function(username, password){ 
    return { 
    url: TOKEN_PROVIDER + '?grant_type=password&username=' + username + '&password=' + password, 
    method: 'POST', 
    responseType: 'json', 
    crossDomain: true, 
    withCredentials: true, 
    headers: { 
     'Authorization': 'Basic <base64-encoded-user@password>', 
    } 
    } 
} 

Die HTTP-Header erfasst:

http://localhost:8082/api/oauth/token?grant_type=password&username=xxx&password=yyy 

OPTIONS /api/oauth/token?grant_type=password&username=xxx&password=yyy HTTP/1.1 
Host: localhost:8082 
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.11; rv:56.0) Gecko/20100101 Firefox/56.0 
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 
Accept-Language: en-US,en;q=0.5 
Accept-Encoding: gzip, deflate 
Access-Control-Request-Method: POST 
Access-Control-Request-Headers: authorization 
Origin: http://localhost:3000 
DNT: 1 
Connection: keep-alive 

HTTP/1.1 401 
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 
WWW-Authenticate: Basic realm="MY_REALM/client" 
Content-Type: text/html;charset=utf-8 
Content-Language: en 
Content-Length: 1098 
Date: Wed, 01 Nov 2017 17:57:38 GMT 

Alles endet mit 401 Antwort, da der Berechtigungsheader nicht gesendet wurde. Ich habe den Oauth2-Endpunkt manuell mit dem Postman-Tool getestet, und alles ist gut gelaufen: Ich habe ein gültiges Zugriffstoken, könnte es erneuern, usw. CORS ist auf Serverseite aktiviert.

Was fehlt mir hier?

Answer 1

Der Client-Code funktioniert ordnungsgemäß.

Sie haben die OPTIONS cors-Anfrage erfasst, die den Server fragt, ob es OK ist, den Autorisierungsheader zu senden (siehe Access-Control-Request-Headers: authorization).

Stellen Sie sicher, dass Sie CORS korrekt auf Ihrem Server konfiguriert haben. Es sollte nicht versuchen, OPTIONS-Aufrufe zu authentifizieren. Es sollte stattdessen eine richtige Antwort senden, die dem Browser mitteilt, ob es erlaubt ist, den POST-Anruf zu tätigen.