CSRF token validation failed for my POST Method in SAPUI5 using Eclipse?

[vamsilakshman_pendurti]

Hi Experts,

Here i am facing one issue with Create an entry into Database Table using SAPUI5 & OData. Fetching the data from Database and displaying in our SAPUI5 application has been done perfectly using OData Service. Fetching purpose i used the below code...

Output:

when i was trying to create by clicking on Create button : below i am providing my code for Create (POST) Method...

when i click on Save button it will not triggering my jQuery.ajax line in my Controller code so that it displays else part message.

In DOM i got the error like CSRF token validation failed...

i searched in SCN with the above mentioned error wise, but no relevant solution is found. If any one face this kind of issue and resolved please guide me the steps...where exactly i did the mistake.

Thanks,

Vamsi.

[junwu]

why use jquery.ajax.....you are looking for trouble....

[former_member340030]

Its ok Jun .. we can even use ajax .. might be his services not follow oData principles so why to use oData Model

[vamsilakshman_pendurti]

Hi,

Actually i don't know whether my services are following OData Principles OR not. Just i am practicing & i want to create one record in SAP DB using SAPUI5. I already done OData Service for that. Now for SAPUI5 i copied the logic from Internet Only ( jQuery.ajax ) ...

If there is any other better approach, please share with me...

Thanks ,

Vamc

[former_member340030]

Yeah through oData you can do the CRUD operations ,that's the way we should do. Ajax is not recommended. Use oData model and the operations ... Just check out these blogs they are using oData ..

https://blogs.sap.com/2015/02/05/simple-exercise-on-odata-and-sap-ui5-application-for-the-basic-crud...

https://blogs.sap.com/2014/01/13/building-a-crud-application-with-sapui5-using-odata-model/

[junwu]

yes, of course, you can write plain html to code your web app. have fun....

[junwu]

use odatamodel to do the job.

[vamsilakshman_pendurti]

Hi Viplove,

I applied same code which you mentioned a link in previous post....

Here is my code...as shown below screen..

When i execute and want to create new record...it will display one popup as shown below..

When i click on Save Button then it will display as shown below screen shot...

That's it nothing will happened...

My 6th Record was not created ... Could you please look into this and give me the solution...

Thanks,

Vamc

[former_member340030]

Hi

What error you are getting in the console or F12 networks tab ??

thanks

Viplove

[gaurav_setu]

csrfToken : function(th){ var that=this; var a = "any entity set url or service url"; var f = { headers : { "X-Requested-With" : "XMLHttpRequest", "Content-Type" : "application/atom+xml", DataServiceVersion : "2.0", "X-CSRF-Token" : "Fetch" }, requestUri : a, method : "GET" }; OData.request(f, function(data, oSuccess) { this.ViewThis.oToken = oSuccess.headers['x-csrf-token']; }); },

[former_member340030]

Hi vamsilakshman pendurti,

You need to first fetch the XCSRF token and than need to pass for the post request as without xcsrf validation the server doesnt trust the client ..so it will not allow you to POST the data.

To fetch the x-CSRF token :

function getCSRFToken() { var token = null; $.ajax({ url: <your Service or metadata> type: "GET", async: false, beforeSend: function(xhr) { xhr.setRequestHeader("X-CSRF-Token", "Fetch"); complete: function(xhr) { token = xhr.getResponseHeader("X-CSRF-Token"); return token;

And than use this toke and set it in the header of the POST request like this :

xhr.setRequestHeader('X-CSRF-Token', token);

[vamsilakshman_pendurti]

Hi Viplove ,

Thanks for the reply and now my cursor is triggering the POST Method in $.ajax Statement.

I added that code which you mentioned for POST method...as shown below

Now i got the error like below mentioned...

Uncaught ReferenceError: xhr is not defined

how to define it ...

Thanks,

Vamc

[former_member340030]

Hey ,

You are doing it incorrectly , i provided the code to be placed in beforeSend property of the ajax :

beforeSend: function(xhr) { xhr.setRequestHeader('X-CSRF-Token', token);}

and if you are using header property of ajax, you need to mention as key value pair .. reference http://api.jquery.com/jquery.ajax/

And also token is variable containing XCSRF token which you need to fetch from the GET request ..(mentioned in my previous answer)

thanks

VIplove

[vamsilakshman_pendurti]

Hi Viplove,

Basically i am from ABAP, i am new to this JAVASCRIPT that's y this confusion.

Here i am placing my code check it once..

If you don't mind please correct it...( if you have time please look into this code and make some modifications )

In the below code, Bold lettered lines of code is copied from your code...

CODE:

//''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''

function getCSRFToken() { var token = null;
$.ajax({ url: '<<My URL>>' ,
type: "GET",
async: false ,
crossDomain : true ,
headers: {
//'api-key' : 'XXXXX',
userId : 'vcuser',
password : '123456',
},
beforeSend: function(xhr){ xhr.setRequestHeader("X-CSRF-Token", "Fetch") ; },
complete: function(xhr){ token = xhr.getResponseHeader("X-CSRF-Token");
return token;
}
})
}
//''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
$.ajax({
type: 'POST' ,
url : '<<My URL>>' ,
//jsonpCallback: 'processJSON',
dataType: "json",
data: JSON.stringify(oNew),
contentType:"application/json" ,
headers: xhr.setRequestHeader('X-CSRF-Token', token) ,
success: function(){
new sap.m.MessageToast.show("Customer Added Successfully");
oDialogue.close();
sap.ui.getCore().byId("myTable").getModel().refresh(true);
},

error: function(){
new sap.m.MessageToast.show("Error while adding the Customer");
oDialogue.close();
}
});

Thanks,

Vamc

[former_member340030]

var token ;

$.ajax({ url: '<<My URL>>' ,
type: "GET",
beforeSend: function(xhr){ xhr.setRequestHeader("X-CSRF-Token", "Fetch") ; },
complete: function(xhr){ token = xhr.getResponseHeader("X-CSRF-Token");

$.ajax({
type: 'POST' ,
url : '<<My URL>>' ,
dataType: "json",
data: JSON.stringify(oNew),
contentType:"application/json" ,

beforeSend: function(xhr) { xhr.setRequestHeader('X-CSRF-Token', token);}

success: function(){

new sap.m.MessageToast.show("Customer Added Successfully");
oDialogue.close();
sap.ui.getCore().byId("myTable").getModel().refresh(true);
},
error: function(){
new sap.m.MessageToast.show("Error while adding the Customer");
oDialogue.close();
}
});

}
})

thanks

VIplove