Passing X-CSRF-Token (Ruby on Rails)

In Ruby on Rails, you need to pass X-CSRF-Token in POST request header in order to properly handle the form. jquery-ujs basically handles that by default, but if you are not using it or you want to send requests with some other libraries (like fetch), you need to pass this header by your own.

In jQuery, this can be handle (and this works) like:

var token = $('meta[name="csrf-token"]').attr('content');

$.ajax({
    url: '/somecustomurl',
    type: 'post',
    beforeSend: function (xhr) {
        xhr.setRequestHeader('X-CSRF-Token', token)
    },
    data: {},
    contentType: false,
    processData: false
});

With fetch, I’ve tried:

fetch('/somecustomurl', {
  method: 'POST',
  headers: {
    'X-CSRF-Token': token
  },
  body: JSON.stringify({})
})

And this example never works - controller will always raise a InvalidAuthenticityToken exception.

Any ideas how can this be solved with fetch?

[origamih]

@peric You need to set header props: 'X-Requested-With': 'XMLHttpRequest', and credentials: 'same-origin'.

fetch(url, { 
      method: 'POST',
      headers: {
        'X-Requested-With': 'XMLHttpRequest',
        'X-CSRF-Token': token
      },
      body: ,
      credentials: 'same-origin'
    })

Updated: to make rails accept JSON post, add the following code to header:

'Content-Type': 'application/json',
        'Accept': 'application/json'

[mislav]

How will we be able to use fetch now, to send each forms own token?

The way we do this in GitHub.com is to generate an actual <form> element on the server, via Rails’ form_tag helper. Each form generated that way also includes the per-form token. Then, if we need to post that form using JavaScript, we simply use FormData:

fetch(form.action, {
  method: 'POST',
  body: new FormData(form)
})