Не удается проверить подлинность токена CSRF Rails/React

Question

У меня есть компонент реакции в моем приложении rails, где я пытаюсь использовать fetch() чтобы отправить POST в мое приложение rails, размещенное на localhost, это дает мне ошибку:

ActionController::InvalidAuthenticityToken (ActionController::InvalidAuthenticityToken):

Я использую придумать драгоценный камень для обработки user/registrations а также logins,

Я пытался удалить protect_from_forgery with: :exception

Вот код для моей выборки,

this.state.ids.sub_id});
  fetch(POST_PATH, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: body  
  }).then(res => res.json()).then(console.log);

Как я могу получить токен csrf и отправить его через форму, чтобы он прошел?
В идеале я хотел бы просто отправить его через заголовки, но я не знаю, как получить доступ к токену.

Answer 1

Самый простой способ сделать это, если вы просто встраиваете компонент реагирования в представление Rails, - это получить токен csrf из представления rails, а затем передать его в качестве заголовка в вызове API fetch.

Вы можете получить токен csrf, выполнив что-то вроде этого:

const csrf = document.querySelector("meta[name='csrf-token']").getAttribute("content");

И тогда вы просто передаете его как заголовок в вызове fetch: ... headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': csrf }, ...

Обычно я не использую fetch, поэтому не уверен насчет точного синтаксиса, но это должно помочь вам.

Answer 2

Спасибо! Я закончил с этим в качестве рабочего решения: с точки зрения, что делает мой компонент реагировать

<% csrf_token = form_authenticity_token %>

<%= react_component('ExerciseDisplay', {
  program: @program.subprograms.first.exercises, ids: {sub_id: @program.subprograms.first.id, team_id: @team.id, token: csrf_token}
}) %>

Я передал токен в состояние, затем получил доступ к нему через fetch:

  fetch(POST_PATH, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-CSRF-Token': this.state.ids.token
      },
      body: body  
}).then(res => res.json()).then(console.log);

Answer 3

Внутри вашегоformэлемент, добавьтеauthenticity_token:

      <input type="hidden" name="authenticity_token" value={csrf}/>

Установите значение, как показано ниже:

      const csrf = document.querySelector("meta[name='csrf-token']").getAttribute("content");

Answer 4

Я тоже столкнулся с той же проблемой при использовании rails 5.2, и я смог решить эту проблему, добавив

protect_from_forgery with: :null_session в application_controller.rb я получил это отсюда, пожалуйста, отсылайте это