Ext.data.Connection.override request - ajax

Question

I am trying to intercept all requests, before send, from an Extjs App, POST and GET and then manipulate the URL and add a new Header, Authorization: Bearer XYZ123.
I've this code:
Ext.data.Connection.override({
request: function (options) {
var me = this;
this.cors = true;
this.useDefaultHeader = false;
this.useDefaultXhrHeader = false;
options.headers = { "Authorization": "Bearer VAROIS1iOiJKV1QiLCJh" };
var separator = options.url.indexOf('/') == 0 ? "" : "/";
options.url = UrlAPIPrefix + separator + options.url;
return me.callOverridden(arguments);
}
});
But when i try to use it, the Header Authorization is not sent in both cases, GET and POST. Parameters are not sent when using POST. I am able to see params if debugging the code into Extjs files, but can't see it on chrome Request Headers, see image.
If any one knows how to do it, in one place, i will be glad if you can help me.

Answer 1

That's because Ext.Ajax - the singleton of Ext.data.Connection - is used for most requests in the framework and overriding the latter does not affect the former. This overriding behavior was changed in extjs 5 and is intended by Sencha.
Use what you need of this instead:
Ext.Ajax.setWithCredentials(true);
Ext.Ajax.on({
beforerequest: function(conn, options) {
options.headers = options.headers || {};
options.headers['Authorization'] = 'Bearer VAROIS1iOiJKV1QiLCJh';
},
requestexception: function(conn, response, options) {
Ext.Error.raise('...');
}
});
And don't hardcode the token into your javascript!!!

Answer 2

Instead of overriding the class, i created a bootstrap class to set up the ajax interceptor. Called Bootstrap.init() in Application.launch() method.
Ext.define('MyApp.Bootstrap', {
singleton : true,
init: function() {
Ext.Ajax.on({
beforerequest: function(conn, opts){
if(opts.url && Ext.String.startsWith(opts.url, '/')) {
return;
}
if(opts.url && !Ext.String.startsWith(opts.url, MyApp.Config.SERVER_CONTEXT)) {
opts.url = MyApp.Config.SERVER_CONTEXT + opts.url;
}
var clientId = MyApp.getApplication().clientId;
opts.headers = Ext.apply({'X-Client-Id': clientId}, opts.headers);
Ext.log('Sending Request to : ', opts.url);
}
});
}
});