HTTP Status 403 - Bad or missing CSRF value but the csrf token is set

Question

I have an ajax request which looks like this:

$.ajax({
   headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
       },
       'url': defaults.addToCartUrl,
       'data': JSON.stringify({CSRFToken: Config.CSRFToken,currentUser: currentCustomer, entries: cartItems}),
       'type': 'POST',
       'dataType': 'json',
       beforeSend: function(xhr) {
           xhr.setRequestHeader('X-CSRFToken', Config.CSRFToken);
        },
        'success': function (data, textStatus, jqXHR) {

        },
        'error': function (jqXHR, exception, m) {
             console.log('Cannot move products from 
         }
     });

The problem is that I keep getting this HTTP Status 403 - Bad or missing CSRF value but I set the token as a parameter in the data payload as well as on the request header.

Answer 1

Isn't the beforeSend supposed to set the token to "X-CSRF-Token"? Maybe use ajaxSetup for your headers?

Example:

$.ajaxSetup({
  headers: {
    'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
  }
});