Custom headers not working

[ruudboon]

I'm trying to get custom headers to work. The example in the documentation doesn't seem to work. And returns a not found on the method.

this.imageLoaderConfig.setHttpRequestOptions({
  headers: {
    Authorization: 'Basic dGVzdHVzZXJuYW1lOnRlc3RwYXNzd29yZA=='
  }
});

In the code I'm seeing setHttpHeaders is available and that expecting an HttpHeader object.
Tried the example below but not seeing a header.

import { HttpHeaders } from '@angular/common/http';

let headers = new HttpHeaders();
    headers.append('Authorization', 'Bearer blablah-blah');
    imageLoaderConfig.setHttpHeaders(headers);
    imageLoaderConfig.enableDebugMode();

[pierresh]

Hello,

I also meet that problem, thanks!

[Enrico204]

Angular HttpHeaders objects are immutable, so you need to do something like that:

let headers = new HttpHeaders().set("Authorization", "Bearer blablabla");
imageLoaderConfig.setHttpHeaders(headers);

or

var headers = new HttpHeaders({
   "Header1": "Value1",
   "Header2": "Value2",
});
imageLoaderConfig.setHttpHeaders(headers);

[markrinkel]

I haven't been able to make this work.

If I use the first example:

let headers = new HttpHeaders().set("Authorization", "Bearer blablabla"); imageLoaderConfig.setHttpHeaders(headers);

when I debug the value of the imageLoaderConfig.httpHeaders, I get:

{"normalizedNames":{},"lazyUpdate":[{"name":"Authorization","value":"Bearer blablabla","op":"s"}],"headers":{},"lazyInit":{"normalizedNames":{},"lazyUpdate":null,"headers":{}}}

which is what I expect. However I need to add multiple headers. So I tried the second example:

var headers = new HttpHeaders({ "Authorization": "Bearer blablabla", "DeviceToken": "blablabla", }); imageLoaderConfig.setHttpHeaders(headers);

and when I debug the value of imageLoaderConfig.httpHeaders, I get:

{"normalizedNames":{},"lazyUpdate":null}

It doesn't appear to assign the headers.

I previously used injection to add the headers, but that stopped working (unknown reason). So I ensured I was on 6.3.2 and tried using setHttpHeaders without success.

[Enrico204]

Uhm, I can't reproduce on my side. If you use multiple .set() calls? Does it works? I mean something like:

let headers = new HttpHeaders().set("Authorization", "Bearer blablabla")
                     .set("DeviceToken", "blablabla");
imageLoaderConfig.setHttpHeaders(headers);

[markrinkel]

Yes, that works!

Thank you.

[nylz]

Not working for me! Version: + [email protected] doing exactly as described above. Ionic Info: `Ionic:

ionic (Ionic CLI) : 4.12.0 (/usr/lib/node_modules/ionic) Ionic Framework : @ionic/angular 4.3.0 @angular-devkit/build-angular : 0.13.8 @angular-devkit/schematics : 7.3.8 @angular/cli : 7.0.7 @ionic/angular-toolkit : 1.5.1

Cordova:

cordova (Cordova CLI) : 8.1.2 ([email protected]) Cordova Platforms : android 8.0.0 Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.0.1, (and 12 other plugins)

System:

Android SDK Tools : 26.1.1 (/home/nylz/Android/Sdk) NodeJS : v9.11.2 (/usr/bin/node) npm : 6.9.0 OS : Linux 4.9 ` I tried everything and each combination. There is no header set in the image-requests!

[Enrico204]

Can you post the relevant part of your code?

[nylz]

constructor of app.component.ts:

constructor(
    imageLoaderConfig: ImageLoaderConfigService,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,
    private pushyInitializer: PushyInitializerService,
    private platform: Platform,
    private router: Router,
    private httpClient: HttpClient,
    private domSanitizer: DomSanitizer
  ) {
    imageLoaderConfig.setConcurrency(10);
    imageLoaderConfig.useImageTag(true);
    imageLoaderConfig.enableSpinner(true);
    imageLoaderConfig.setSpinnerName('crescent');
    imageLoaderConfig.setSpinnerColor('primary');
    imageLoaderConfig.setFallbackUrl('assets/images/image_placeholder.png');
    imageLoaderConfig.enableFallbackAsPlaceholder(false);
    const headers = new HttpHeaders().set('Authorization', 'Bearer blablabla')
                .set('DeviceToken', 'blablabla');
    imageLoaderConfig.setHttpHeaders(headers);
    imageLoaderConfig.enableDebugMode();

  }

and in the template of the component / page:

<img-loader [src]="getImageUrl(object)" (click)="show_detail(object, i)"></img-loader>

then the request header to http://localhost:8080/Application_www/images/web/boxthumb/2039 looks like:

Host: localhost:8080
User-Agent: Mozilla/5.0 (X11; Linux x86_64; rv:60.0) Gecko/20100101 Firefox/60.0
Accept: */*
Accept-Language: de-DE,en-US;q=0.7,en;q=0.3
Accept-Encoding: gzip, deflate
Referer: http://localhost:8100/main/overview
Cookie: JSESSIONID=C64540999B1BF4A7364A6EC555BA89B3
DNT: 1
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache