2017-11-17 31 views
6

Próbuję nawiązać połączenie Post używając HttpClient w kątowym 5 projektu i chcę ustawić nagłówek:kątowa 5 - Nie można ustawić nagłówek HttpClient

import { HttpClient, HttpHeaders, HttpRequest } from '@angular/common/http'; 
import { Injectable } from '@angular/core'; 

import { AuthData } from './models/auth-data'; 

@Injectable() 
export class AuthService { 

    constructor(private http: HttpClient) { } 

    auth = (data: AuthData) => { 

     var url = "https://.../login"; 
     var payload = data; 
     var headers = new HttpHeaders().set('Content-Type', 'application/json; charset=utf-8'); 
     var options = { 
      headers: headers 
     }; 

     this.http.post(url, payload, options).subscribe(); 
    } 
} 

Z jakiegoś powodu, Content-Type nagłówek nie wydaje się być w żądaniu, które robię.

enter image description here

Dlaczego tak jest?

+0

Czy zażądać nawet wypalania? Czy sprawdziłeś w dziennikach lub debugowaniu, czy nagłówki są ustawione przed uruchomieniem żądania? W każdym razie powinieneś zwrócić "Observable", a nie "Subscription". – AndreaM16

+1

Content-Type nie zmienia się, co oznacza zmiana, zmiana z czego? :) – Alex

+0

czy możesz określić, co dokładnie oznacza, że ​​"nagłówek nie wydaje się być na żądanie"? mówi kto? devtools w przeglądarce? lub punkt końcowy serwera? lub? –

Odpowiedz

3

Jeśli widzę prawidłowo, co pan pokazuje nam to OPCJE inspekcji wstępnej żądanie (CORS), nie jest to faktyczna żądania POST.

Powinno powstać 2 "żądań". Metoda http dla jednego powinna być OPCJAMI (tą, którą tu pokazałeś, nazywaną żądaniem inspekcji wstępnej) i jednym rzeczywistym POST (jeśli serwer zezwala na to klientowi). Jeśli host jest inny niż locahost:4200, który zakładam, to musisz włączyć żądania cors na swoim serwerze dla klienta localhost:4200.

+0

Co się stanie, jeśli zostanie ustawione na "Access-Control-Allow-Origin": "*", ale nadal będzie otrzymywane żądanie wstępne? –

0

Spróbuj tego:

var headers = new HttpHeaders(); 
headers.append('Content-Type', 'application/json'); 
+0

To nie zadziałało :-( –

+6

Jednym z powodów, dla których to nie zadziała, jest to, że nagłówki są niezmienne.Należy przypisać wynik metody append (która powoduje, że klon nagłówków) z powrotem do nagłówków: headers = headers. append (blah) – glitchbane

0

Spróbuj też miałem ten sam problem;)

ng build --production -host=yourDomain.com 

Rzeczą jest, że projekt jest zbudowany na localhost, wykorzystując węzeł, i zachować te domyślnego hosta i port informacji, można go zmienić podczas budują projekt

0

ponieważ HttpHeaders jest niezmienna musimy przypisać to

const _headers = new HttpHeaders(); 
const headers = _headers.append('Content-Type', 'application/json') 
         .append('...', '...') 
         .append('...', '...');