this is an example from an angular project / typescript. The only thing i think of with the headers not getting modified on occasion is what i read about JSONP maybe headers are not passed when wrapped in a JSONP request. I do see a difference when the headers do get passed i see a reference to a callback function int the ioArgs (params), when that callback reference isn't there the headers do not get passed with the request. I'm going to use a custom query param (pantheon below) instead as that always seems to get passed on every case. Hope this helps.
this.esriConfig.request.interceptors.push({ before: this.EsriRequestInterceptor.bind(this) });
/**
* A place to intercept esri requests
* was looking at this at one point for JWT Token Auth
* @param ioArgs
*/
EsriRequestInterceptor(ioArgs: any) {
// Renew the jwt
if (this.auth.isClientTokenExpired()) {
this.auth.renewClientToken();
}
if (ioArgs.url.toLowerCase().startsWith(`${environment.webApiUrl}/map`.toLowerCase())) {
const idToken = localStorage.getItem('client_token');
// console.log('Modifying Request', idToken);
ioArgs.requestOptions.headers = ioArgs.headers || {};
ioArgs.requestOptions.headers.Authorization = 'Bearer ' + idToken;
ioArgs.requestOptions.query = ioArgs.requestOptions.query || {};
ioArgs.requestOptions.query.pantheon = idToken;
}
}
