Angular 4 HttpClient not setting params or headers

Question

Not sure what I'm doing wrong here. The code is pretty simple.

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

import { Observable } from 'rxjs/Rx';

@Injectable()
export class Service {

  private baseUrl = 'http://localhost:8443';

  constructor(private http: HttpClient) { }

  callSecurityGateway(): Observable<String> {

    const params = new HttpParams()
    .set('grant_type', 'password')
    .set('scope', 'read')
    .set('username', 'myusername')
    .set('password', 'mypassword');

    const headers = new HttpHeaders().set('Authorization', 'Basic s89s89s89asd');

    const httpOptions = {
      headers: headers,
      params: params,
      responseType: 'text',
      // withCredentials: true
    };

     // this works to ram the parameters in
    // const oauthUrl = '/oauth/token?grant_type=password&scope=read&username=myusername&password=mypassword';
    // return this.http.post<String>(this.baseUrl + oauthUrl, httpOptions);
    return this.http.post<String>(this.baseUrl + '/oauth/token', httpOptions);

   }

}

What I see in the request headers is this:

OPTIONS /oauth/token HTTP/1.1
Host: localhost:8443
Connection: keep-alive
Access-Control-Request-Method: POST
Origin: http://localhost:4200
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, 
like Gecko) Chrome/62.0.3202.89 Safari/537.36
Access-Control-Request-Headers: content-type
Accept: */*
Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.9

I don't even see any parameters like there should be.

I don't know if this helps but what I see in the httpOptions object in the console shows me the header in headers.lazyUpdate and the params in params.updates which is an array of the 4 params I've set.

I've run out of examples; thinking it might be easier just to go backwards and use http instead of httpclient for this.

I think it will be CORS problem,, – Mochamad Arifin Feb 04 '18 at 09:34 — Mochamad Arifin, Feb 04 '18 at 09:34

score 0 · Answer 1 · answered Feb 04 '18 at 09:40

You will get error if no Authorization Header allowed on Access-Control-Allow-Headers. and credentials such as cookie will not sent if you not have Access-Control-Allow-Credentials: true

On your server side, try adding this code to make 'credentials' work on Cross site:

header('Content-Type: text/plain');
if( isset($_SERVER['HTTP_ORIGIN']) )
{
    header('Access-Control-Allow-Origin: ' . trim($_SERVER['HTTP_ORIGIN']));
}else{
    header('Access-Control-Allow-Origin: *');
}
header('Access-Control-Allow-Headers: Authorization, Origin, X-Requested-With, Content-Type, Access-Control-Allow-Origin');
header('Access-Control-Allow-Methods: GET, POST');
header('Access-Control-Allow-Credentials: true');

// Client/Browser may send 'OPTIONS' header to check its allowed or not
if( $_SERVER['REQUEST_METHOD'] == 'OPTIONS' )
{
    return;
}

Angular 4 HttpClient not setting params or headers

1 Answers1