无法在 Rails + React 应用程序中验证 CSRF 令牌

Question

我有一个使用Rails和React的应用程序。轨道中的 AJAX 部分工作正常，但我在 React 中有一些使用 AJAX 的组件，并且错误发生在通过 React 组件的 AJAX 请求中。

我收到以下错误：

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):

我尝试通过将其添加到我的main.js

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

这在我的本地机器上完全可以正常工作，但在生产环境（Heroku）上给出了相同的错误。

或者，我也尝试在 React 组件内各个 ajax 请求的标头中添加 CSRF 令牌，如下所示：

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

此方法在本地也可以正常工作，但在生产中会给出相同的Can't verify CSRF token authenticity.错误。

我的头部有<%= csrf_meta_tags %>，我的application.js上也有//= require jquery_ujs

知道为什么它不适用于 Heroku 的生产环境吗？

Answer 1

也许，这应该有效。

链接在这里 !!

---

使用 jquery.csrf （https://github.com/swordray/jquery.csrf）。

• 导轨 5.1 或更高版本

  $ yarn add jquery.csrf
  

  //= require jquery.csrf
  

• 导轨 5.0 或更早

  版本

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

  //= require jquery.csrf
  

• 源代码

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