Impossible de vérifier le jeton CSRF dans Rails + React App

Question

J'ai une application qui utilise Rails et React. La partie AJAX dans les rails fonctionne bien, mais j'ai des composants dans React qui utilisent AJAX et l'erreur se produit dans les requêtes AJAX via les composants React.

je reçois l'erreur suivante:

2017-10-17T15:36:26.933083+00:00 app[web.1]: [14b2fc9e-80b7-490f-b905- 
5be9f6839c5b] Started POST "/quiz_submissions" for 162.158.165.188 at 2017-10-17 15:36:26 +0000 
2017-10-17T15:36:26.935109+00:00 app[web.1]: [14b2fc9e-80b7-490f-b905- 
5be9f6839c5b] Processing by QuizSubmissionsController#create as JSON 
2017-10-17T15:36:26.935151+00:00 app[web.1]: [14b2fc9e-80b7-490f-b905-5be9f6839c5b] Parameters: {"quiz_submission"=>{"quiz_problem_id"=>"21", "checked_option_ids"=>["88"]}} 
2017-10-17T15:36:26.935688+00:00 app[web.1]: [14b2fc9e-80b7-490f-b905-5be9f6839c5b] Can't verify CSRF token authenticity. 
2017-10-17T15:36:26.936459+00:00 app[web.1]: [14b2fc9e-80b7-490f-b905-5be9f6839c5b] Completed 422 Unprocessable Entity in 1ms (ActiveRecord: 0.0ms) 
2017-10-17T15:36:26.937451+00:00 app[web.1]: [14b2fc9e-80b7-490f-b905-5be9f6839c5b] 
2017-10-17T15:36:26.937485+00:00 app[web.1]: [14b2fc9e-80b7-490f-b905-5be9f6839c5b] ActionController::InvalidAuthenticityToken (ActionController::InvalidAuthenticityToken): 

J'ai essayé d'ajouter le jeton CSRF en-tête ajax en ajoutant à mon main.js

$.ajaxSetup({ 
    beforeSend: function(xhr) {xhr.setRequestHeader('X-CSRF-Token', 
    $('meta[name="csrf-token"]').attr('content'))}, 
}); 

Cela fonctionne tout à fait bien sur ma machine locale, mais donne la même erreur sur l'environnement de production (Heroku).

Sinon, j'ai aussi essayé d'ajouter le jeton CSRF dans l'en-tête des demandes individuelles ajax intérieur du React composant comme suit:

$.ajax({ 
     dataType: 'JSON', 
     type: 'POST', 
     url: '/quiz_submissions', 
     context: this, 
     headers: { 
      'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content') 
     }, 
     data: { 
     ... 
     } 
     } 

Cette approche fonctionne aussi bien au niveau local, mais donne la même Can't verify CSRF token authenticity. erreur sur la production .

je <%= csrf_meta_tags %> sur ma section de tête et j'ai aussi //= require jquery_ujs sur mon application.js

Toute idée pourquoi il ne fonctionne pas sur l'environnement de production sur Heroku?

Answer 1

Probablement, Cela devrait fonctionner.

LINK HERE !!!

---

utilisation jquery.csrf (https://github.com/swordray/jquery.csrf).

• Rails 5.1 ou version ultérieure

  $ yarn add jquery.csrf 
  

  //= require jquery.csrf 
  

• Rails 5.0 ou avant

  source 'https://rails-assets.org' do 
      gem 'rails-assets-jquery.csrf' 
  end 
  

  //= require jquery.csrf 
  

• code source

  (function($) { 
      $(document).ajaxSend(function(e, xhr, options) { 
      var token = $('meta[name="csrf-token"]').attr('content'); 
      if (token) xhr.setRequestHeader('X-CSRF-Token', token); 
      }); 
  })(jQuery);