Skip to Content
0

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

Apr 28, 2017 at 06:16 AM

1.2k

avatar image

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.

csrf1.jpg (34.1 kB)
csrf2.jpg (57.7 kB)
csrf3.jpg (17.6 kB)
csrf4.jpg (141.8 kB)
10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

3 Answers

VIPLOVE KHUSHALANI Apr 28, 2017 at 08:01 AM
0

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);
Show 4 Share
10 |10000 characters needed characters left characters exceeded

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

err.jpg (39.8 kB)
0

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

0

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

0

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

0
gaurav setu Apr 28, 2017 at 09:30 AM
0

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']; }); },

Share
10 |10000 characters needed characters left characters exceeded
Jun Wu Apr 28, 2017 at 12:00 PM
0

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

Show 7 Share
10 |10000 characters needed characters left characters exceeded

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

0
VIPLOVE KHUSHALANI

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

0

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

0
vamsilakshman pendurti

use odatamodel to do the job.

0

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-operation/

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

0

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

e2.jpg (90.1 kB)
e0.jpg (20.4 kB)
e1.jpg (110.6 kB)
0

Hi

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

thanks

Viplove

0