How to make DataManager UrlAdaptor make requests to server with credentials

[Kunal]

Hi,

I have a Node.js backend server and for react kanban board I'm using a data manager to get and update data. I have implemented authentication with passport in the backend. How do I make the adaptor include the credentials with the request. Like axios has withCredentials flag.

Since the adaptor is not passing the credentials, the server is not responding with the Json file. If I make the request with Axios, I get the data and can populate the cards.

Axios Example:

axios

.get("http://localhost:8000/sheet/getAllData", {

withCredentials: true,

})

.then((response) => response.json())

.then((usefulData) => {

setData(usefulData);

})

.catch((e) => {

// console.error(`An error occurred: ${e}`);

});

My React functional component:

const Kanban = () => {

let data = new DataManager({

url: "http://localhost:8000/sheet/getAllData",

adaptor: new UrlAdaptor(),

crossDomain: true,

});

console.log(data);

return (

<KanbanComponent

id="kanban"

keyField="Status"

dataSource={data}

cardSettings={{ contentField: "Summary", headerField: "Id" }}

>

<ColumnsDirective>

<ColumnDirective headerText="Applied" keyField="Open" />

<ColumnDirective headerText="OA Received" keyField="InProgress" />

</ColumnsDirective>

</KanbanComponent>

);

};

[Vinitha Jeyakumar]

Hi Kunal,

The behavior of URL Adaptor is different from the Axios. You can use the headers property of Data Manager to send the required details in the request header.

    var headers = [{isValid:true}];

    let data = new ej.data.DataManager({

        url: "Home/UrlDataSource",

        headers: headers,

adaptor: new ej.data.UrlAdaptor

    });

Screenshot:

Regards,

Vinitha

[Kunal]

That doesn't solve the problem. Setting header won't include credentials with the request. I need to specify to include credentials when making the request. The cookie is HTTP only so I can't access the cookie and set it in headers myself. Can I make a custom adaptor that uses axios to make requests? I can't find any example of that. Could you help me with that?

[Kunal]

I want to change withCredentials to true in httpRequest inside requests. This is my data manager logged on console. 

[Vinitha Jeyakumar]

Hi Kunal,

Query 1. " Can I make a custom adaptor that uses axios to make requests?"

We can’t achieve your requirement by using the custom Adaptor. But it can be achieved by sending your own request for data operation. here, you can make own request and send it to the server for all the data operations.

For every action like update, delete and edit, Kanban actionComplete event will get triggered and using that event arguments, you can get the data of the changed cards and update them to the database using your custom service.

Please check the sample below for your reference.

Sample: https://stackblitz.com/edit/react-3w5r43-tpymgy?file=index.js

Query 2. "I want to change withCredentials to true in httpRequest inside requests. This is my data manager logged on console"

Since we couldn't achieve your requirement using Data manager as we suggested in the above query. this is also not possible here.

Regards,

Vinitha