Идея для обработки токенов CSRF в вашем приложении Rails при использовании webpacker и React.
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, и использует в качестве решения аксиомы - если вы используете другой подход, ваш пробег может отличаться от этого.