Идея для обработки токенов CSRF в вашем приложении Rails при использовании webpacker и React.

Изменить: Прочтите ветку github, на которой основан код в этом сообщении, чтобы получить лучший / актуальный ответ по этой теме.

Rails по умолчанию имеет встроенную защиту CSRF, поэтому, когда вы впервые пытаетесь отправить запрос на публикацию из ответной части вашего приложения, сначала ваш запрос не будет выполнен, и вы, вероятно, увидите в своей консоли такое сообщение:

Can't verify CSRF token authenticity.
Completed 422 Unprocessable Entity
ActionController::InvalidAuthenticityToken

Быстрое и грязное решение

Более простое, но потенциально более безрассудное исправление, которое вы, возможно, захотите сделать, - просто отключить защиту CSRF в вашем контроллере рельсов, что можно сделать следующим образом:

skip_before_action :verify_authenticity_token

Это «исправит» проблему, упомянутую выше, но при этом вы теперь открываете свое приложение, чтобы потенциально принимать незаконные запросы.

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

Другой путь

Предположим, у вас есть компонент в вашем коде React, который выглядит примерно так:

import React, { Component } from 'react'
import axios from 'axios'
class App extends Component {
  handleSubmit = (e) => {
    e.preventDefault()
    axios.post(url, {params: 'bla'})
    .then(resp => console.log(resp))
    .catch(error => console.log(error))
  }

  render(){
    return(
      <form onSubmit={this.handleSubmit}>
        <button type="submit">Click Me</button>      
      </form>      
    )
  }
}
export default App

Используя axios, мы можем обновить этот код для учета токена CSRF, изменив заголовки axios по умолчанию:

import React, { Component } from 'react'
import axios from 'axios'
class App extends Component {
  handleSubmit = (e) => {
    e.preventDefault()
    const token = 
      document.querySelector('[name=csrf-token]').content
    
    axios.defaults.headers.common['X-CSRF-TOKEN'] = token
    axios.post(url, {params: 'bla'})
    .then(resp => console.log(resp))
    .catch(error => console.log(error))
  }

  render(){
    return(
      <form onSubmit={this.handleSubmit}>
        <button type="submit">Click Me</button>      
      </form>      
    )
  }
}
export default App

Добавление этого в ваш код должно решить проблему CSRF и позволить вам отправлять запросы на публикацию из вашего кода React в контроллеры Rails.

Заключение

Приведенный выше пример относится к приложению rails, использующему webpacker, и использует в качестве решения аксиомы - если вы используете другой подход, ваш пробег может отличаться от этого.