Question

我有一个使用Rails和React的应用程序。 rails部分中的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):

我已经尝试在ajax标头中添加CSRF令牌，方法是将其添加到我的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 %>我的//= require jquery_ujs

上还有application.js

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

Answer 1

可能这应该有效。

LINK HERE !!!

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

Rails 5.1或更高版本

$ yarn add jquery.csrf

//= require jquery.csrf

Rails 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);

无法在Rails + React App中验证CSRF令牌

1 个答案: