I am confused about how to create a good header for a simple Get request in Angular 5. 

This is what I need to do in Angular: 
[![enter image description here](https://i.stack.imgur.com/53XMi.png)](https://i.stack.imgur.com/53XMi.png)

This is what I have so far: 

```
  getUserList(): Observable<UserList[]> {
    const headers = new Headers();
    let tokenParse = JSON.parse(this.token)             
    headers.append('Authorization', `Bearer ${tokenParse}`);
    const opts = new RequestOptions({ headers: headers });  
    console.log(JSON.stringify(opts));
    const users = this.http.get<UserList[]>(this.mainUrl, opts)
    return users
            .catch(this.handleError.handleError);         
  }

```

This is the response in my console.log: 

```
{"method":null,"headers":{"Authorization":["Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImp0aSI6ImYwODZlM2FiYTk0ZjVhMjVmNDhiNzlkYmI2YWUwOWY4YzE2MTUyMzg2N2I5MDZiY2MzNWQyNWJiYTZmYTE4YjEwZjA1MjZiNThkZjE2Y2FjIn0.eyJhdWQiOiJmMDExY2M1OC00MGNlLTQzYTktOGY3MS04NDI0OTRlM2E5OTciLCJqdGkiOiJmMDg2ZTNhYmE5NGY1YTI1ZjQ4Yjc5ZGJiNmFlMDlmOGMxNjE1MjM4NjdiOTA2YmNjMzVkMjViYmE2ZmExOGIxMGYwNTI2YjU4ZGYxNmNhYyIsImlhdCI6MTUyMzU1MTQ0NSwibmJmIjoxNTIzNTUxNDQ1LCJleHAiOjE1MjM1NTQ0NDUsInN1YiI6IjIiLCJzY29wZXMiOlsiYXV0aGVudGljYXRlZCIsImFuZ3VkcnUiXX0.E-WdQTl7nPDW0gj0rohfql-QgnAinzvDxPR-pySMrG07XFY9tA6Ex7IL23pDBmKDmQO8RcZKa0L5r6SRQq9_iqzMWzn5Zxp94J9TJrpZ2KGMoLR_FbK_tpC5G5q5vUnCe3q34sH7cPdT_2cI704OWWaYmIUKKpXWUIG0PJw_uKSJ_uOifPv59RZGQkoaQ9gPywDKe-uamm1Faug-Kk2YnFMoEJq7ou19zyxgdpX80ZTPUae67uB0PGLRuvxfGaqVsJ8k0NunAY3-pyUnBwR_3eeuOxf4TyfW2aiOJ9kuPgsfV4Z1JD7nMpNtTHMJaXEyNkBW8RlYHD1pj4dkdnsDmw"]},"body":null,"url":null,"withCredentials":null,"responseType":null}

```

It looks pretty. But gives me this error

> 
> GET <http://druang.dd:8080/user-list?_format=json> 403 (Forbidden)
> 
> 
> 

There is another clue to solve this mystery. In Sublime text, If I put the mouse over `opts` it says something like: 

> 
> ERROR in src/app/services/userlist.service.ts(33,59): error TS2345:
>  Argument of type 'RequestOptions' is not assignable to parameter of
>  type '{ headers?: HttpHeaders | { [header: string]: string | string[];
>  }; observe?: "body"; params?: Ht...'. Types of property 'headers'
>  are incompatible.
>  Type 'Headers' is not assignable to type 'HttpHeaders | { [header: string]: string | string[]; }'.
>  Type 'Headers' is not assignable to type '{ [header: string]: string | string[]; }'.
>  Index signature is missing in type 'Headers'.
> 
> 
> 

Any idea??
Here is the full [Git repo](https://github.com/josuevalrob/angudru)
THanks for your help!