We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How to make DataManager UrlAdaptor make requests to server with credentials

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>
);
};



4 Replies

VJ Vinitha Jeyakumar Syncfusion Team November 15, 2022 08:43 AM

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



KU Kunal November 15, 2022 12:56 PM

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?



KU Kunal November 15, 2022 01:10 PM

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

Screenshot 2022-11-15 at 12.06.42 PM-min.png



VJ Vinitha Jeyakumar Syncfusion Team November 18, 2022 10:01 AM

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.


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

Loader.
Live Chat Icon For mobile
Up arrow icon