How to send credentials with jqGrid?

Question

I have a service which is configured to support CORS. Ususally when I do a server request, I prepare a request object through jQuery and, adding the withCredentials parameter set to true, it is working fine.

But I have a jqGridwith server pagination and I can't manage completelly the xhr object. I've added the loadBeforeSend event, where I've added some headers and are being sent to server properly.

And I've also seen this post (related to jQuery ajax requests): possible answer. I've tried to add the withCredentials property to the xhr object by the following way:

$('#grid').jqGrid({
    loadBeforeSend: function (jqXHR, settings) {
        jqXHR.setRequestHeader('Accept-Language', 'en-US'); 
        jqXHR.setRequestHeader('SiteApplication', '1');

        jqXHR.withCredentials = true;
    }
});

and even by this way:

$('#grid').jqGrid({
    loadBeforeSend: function (jqXHR, settings) {
        jqXHR.setRequestHeader('Accept-Language', 'en-US'); 
        jqXHR.setRequestHeader('SiteApplication', '1');

        jqXHR.xhrFields = {
            withCredentials: true
        }
    }
});

Similar to the solutions explained in the post. But it didn't work.

Any idea of how send to server the cookies?

According you linked post, there is no equal sign for the declaration xhrFields. — Reporter, Feb 24 '15 at 13:30
Do you use the callback `loadBeforeSend` **during creating** the grid? The code which you posted looks very suspected. If you need to set `loadBeforeSend` callback **after** the grid is created you need use `setGridParam` method. — Oleg, Feb 24 '15 at 14:49
Yes @Oleg, I define `loadBeforeSend` during creating the grid. The code snippet I've posted is a very summarized snippet of the code where I create the grid. After diving more in the problem I found a solution which is working, very similar to the code of my answer. — christiansr85, Feb 24 '15 at 14:52

christiansr85 · Accepted Answer · 2015-02-25T08:11:11.407

After diving in jQuery and jqGrid source code, I've seen that very inside the code, in the jQuery.ajaxTransport function, jQuery creates a native XMLHttpRequest javascript object. This object it's created by a local object, called 's', inside the mentioned function.

After this, that 's' object has a property called 'xhrFields' which adds dynamically new fields to the standard xhr object. After debug the code at this level I've realized that the 'settings' parameter received in the loadBeforeSend event of jqGrid is the same object 's' which creates the request object.

Summarizing, I've modified my code to add 'xhrFields' property to 'settings' parameter and it is working. My solution looks like this:

$('#grid').jqGrid({
    loadBeforeSend: function (jqXHR, settings) {
        jqXHR.setRequestHeader('Accept-Language', 'en-US'); 
        jqXHR.setRequestHeader('SiteApplication', '1');

        settings.xhrFields = {
            withCredentials: true
        }
    }
});

By this way the server request sends the user credentials (cookies) to server properly, and I'm glad to avoid use other solutions like adding a custom header with the cookie as I've seen in other posts.

UPDATE: @Oleg posted a better solution for my problem. Although my answer works and could help anyone with similar issues, for this specific case is more elegant (I think) to modify ajaxGridOptions adding the 'xhrFields' property to this property.

So the code would be something like this (very summarized, I've omited the rest of the grid's properties on the creation):

$('#grid').jqGrid({
    loadBeforeSend: function (jqXHR, settings) {
        jqXHR.setRequestHeader('Accept-Language', 'en-US'); 
        jqXHR.setRequestHeader('SiteApplication', '1');
    },

    ajaxGridOptions: {
        xhrFields: {
            withCredentials: true
        }
    }
});

I've realized that crossDomain: true is not needed.

To change any **option** of jQuery.ajax you can use `ajaxGridOptions: {xhrFields: {withCredentials: true}}` or something like `ajaxGridOptions: {xhrFields: {withCredentials: true}}, crossDomain: true`. One should use `loadBeforeSend` only to access `jqXHR`. — Oleg, Feb 24 '15 at 14:53
I've tried your solution, @Oleg, and **it works fine** too. Even I think it's a better solution: I think that `xhrFields` should be defined in `ajaxGridOptions` grid field (I already used this property to define other parameters but I didn't realize I could add the `withCredentials` parameter there). — christiansr85, Feb 24 '15 at 15:06
You are welcome! I think that the solution can be used by other users too. You should don't forget to "accept" your solution later. — Oleg, Feb 24 '15 at 16:29
Ok. A related question to that...should I edit my answer to add your solution too? Or leaving it in the comments is enough? I'm not clear about that... — christiansr85, Feb 24 '15 at 16:32
Yes of course. If you like it, then you can include it in the main text of your answer. It will simplify the readers to find the final solution which you use. — Oleg, Feb 24 '15 at 16:37

How to send credentials with jqGrid?

1 Answers1