title: HTTP Status 403 - Bad or missing CSRF value but the csrf token is set
body: <p>I have an ajax request which looks like this: </p>
  
  <pre><code>$.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 
           }
       });
  </code></pre>
  
  <p>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.</p>
  
  <p><a href="https://i.stack.imgur.com/5rZTc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5rZTc.png" alt="enter image description here"></a></p>