jQuery Ajax calls failing with validation invalid or corrupted

Question

I am developing my first CRUD in the SharePoint Framework. I am not using any javascript framework, just jQuery. The approach works fine outside of the framework. When the program tries to post via an ajax REST call it throws an error. The error is 403 Forbidden and the full error message is "The security validation for this page is invalid and might be corrupted."

Here is the ajax code

fullUrl = siteContext.siteURLSP + siteContext.urlJobTicketsId + jobActivity;
var ajaxData ={
    '__metadata': {'type': 'SP.Data.JobTicketsListItem'},                       
    'Notes' : jQuery("#inputNotes").val(),
    'Completed_x0020_ByStringId': siteContext.currentUser,
    'Completed': today.toISOString()
    }


jQuery.ajax({
        url: fullUrl,
        type: "POST",
        data: JSON.stringify(ajaxData),
        headers: {
            "accept":       "application/json;odata=verbose",
            "content-type": "application/json;odata=verbose",
            "X-RequestDigest" : jQuery("#__REQUESTDIGEST").val(),
            "IF-MATCH": "*",
            "X-HTTP-Method": "MERGE",
        },
        success: onActivityCompletedSuccess,
        error: function(jqXHR, status, error){
            console.log(jqXHR);
            console.log("status="+ status);
            console.log("error=" + error)
            onJobTicketsFailed(jqXHR, status, error);
        }
});

I am suspecting it may have something to do with the REQUESTDIGEST variable but I can't verify that it is the cause. Any help would be greatly appreciated.

Thanks!

Answer 1

The __REQUESTDIGEST hidden field is not available in the SharePoint Framework which is why your request is failing. Instead of trying to retrieve it from the page, you should retrieve it from SharePoint by issuing an AJAX request to /_api/contextinfo (https://github.com/SharePoint/sp-dev-fx-webparts/blob/b63fd893093f90142d4f384cfab3da49d3c1fa6d/samples/angular-multipage/src/webparts/poll/app/services/PollService.ts#L138-L155. While this snippet is based on AngularJS, the principle is the same in jQuery).

Since you're building a SharePoint Framework web part, you should consider using use the standard SPHttpClient which automatically retrieves the request digest for you. For more information see the code sample at https://github.com/SharePoint/sp-dev-fx-webparts/blob/master/samples/sharepoint-crud/src/webparts/noFrameworkCrud/NoFrameworkCrudWebPart.ts.