Ajax headers in viewer don't get propagated to navigator

[mariokolenic]

Could someone please advise me how to add an Authorization token to the NAVIGATOR request header when using TileSource (via URL) ?
Currently I have added the authorization token only for the Viewer, which unfortunately does not forward it to the navigator and its requests.

My code looks like this for now:

this.viewer = new OpenSeadragon.Viewer({
      element: container,
      showNavigationControl: false,

      showNavigator: true,
      navigatorId: 'navigatorDiv',
      navigatorDisplayRegionColor: '#f9df57',

      ajaxHeaders: {
        Authorization: `Bearer ${localStorage.getItem('access_token')}`,
      },
      loadTilesWithAjax: true,

      tileSources: {
        height: this.sampleImageMetadata!.size.height.pixel,
        width: this.sampleImageMetadata!.size.width.pixel,
        tileSize: this.sampleImageMetadata!.tile.optimal.width,
        minLevel: 1,
        maxLevel: this.sampleImageMetadata!.levels,
        getTileUrl: (level, x, y) => this.fetchTileUrl(level, x, y),
      },
    });

What I figured out is that the viewer has ajaxHeader set, but the navigator doesn't - here's the console output:

Can anyone please help me how I can get that authorization to the navigator as well ?

[iangilman]

Wow, that looks like a bug! To fix it, we will need to pass loadTilesWithAjax and ajaxHeaders through when creating the navigator here:

openseadragon/src/viewer.js

Line 496 in 9b7fc46

this.navigator = new $.Navigator({

... And probably also call setAjaxHeaders on the navigator in here:

openseadragon/src/viewer.js

Line 1104 in 9b7fc46

setAjaxHeaders: function(ajaxHeaders, propagate) {

Possibly there are other ajax-related properties that should be propagated?

You're welcome to make a PR if you'd like!

Otherwise, you could probably work around it like so:

viewer.navigator.loadTilesWithAjax = true;

viewer.navigator.setAjaxHeaders({
     Authorization: `Bearer ${localStorage.getItem('access_token')}`,
});

[mariokolenic]

Thank you, I have ingested the current alternative solution. If I have time in the later future, I'll add a PR to the fix as well.

When using the alternative, I found that there are no TYPES created for angular TS on the mentioned functions. So the second problem is that I need to write for the developers of TYPES for OSD - @types/openseadragon, that they don't have access to multiple functionalities.

[iangilman]

The Navigator is basically a subclass of Viewer which is where those functions come from. Do the types reflect that? One option might be to do a viewer.navigator as Viewer to get proper access. But of course it would be good if the types reflected that properly. I'm sure you're welcome to make a PR over at that repository if you want.