VueJS, Apollo, Rails - Can't verify CSRF token authenticity

Question

Here is my setup

const token = $('meta[name="csrf-token"]').attr('content');
const authLink = setContext((_, { headers }) => {
  // return the headers to the context so httpLink can read them
  return {
    headers: {
      ...headers,
      credentials: 'same-origin',
      'X-CSRF-Token': token,
      'authenticity_token': token,
    }
  }
});

I'm trying both X-CSRF-Token and authenticity_token and in my GQL request I can see that it's properly being added to the header. I'm grabbing this off of Rail's = csrf_meta_tags and the value is not null or undefined.

I keep getting a 422 Can't verify CSRF token authenticity. from the rails server.

score 3 · Answer 1 · answered Mar 23 '18 at 12:23

3

you can try reading the CSRF token this way:
document.querySelector('meta[name="csrf-token"]').getAttribute('content')

as far as I know, you cannot use the $ jQuery selector here.
Also, 'X-CSRF-TOKEN' is working on my side

answered Mar 23 '18 at 12:23

Fazakas Istvan

107
1
11

According to the OP, the token is read properly and sent to the server. Why should it be impossible to use `$` here anyways? – Nico Haase Mar 23 '18 at 12:51
right, sorry, I think I didn't require the needed thins when I was trying – Fazakas Istvan Mar 23 '18 at 13:17

VueJS, Apollo, Rails - Can't verify CSRF token authenticity

1 Answers1