How to fix error 403 when csrf enabled with ajax

The browser developer tool is your best friend

You cannot use a variable as an object property name when writing code like this.
 data: {csrfName: csrfHash }  

Use like this

let data = {}
data[csrfName] = csrfHash


and than

$.ajax({ .... data : data 

Or you can send the header in the request.

let csrfHeader = '<?=csrf_header() ?>'

$.ajax({ 
url : 'some-url',
beforeSend: function(request) {
  request.setRequestHeader(csrfHeader, csrfHash);
},
data : { key : value },
....

---

I solved it by adding angle blackets "[]"to the data key like this:

Code:

data: {[csrfName]: csrfHash },

Interesting. Thx. I didn't know anything about computed properties.