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

问题描述：

我有一个使用Rails和React的应用程序。 Rails中的AJAX部分工作正常，但我有一些使用AJAX的React组件，并且通过React组件在AJAX请求中发生错误。无法在Rails + React App中验证CSRF令牌

我得到以下错误：加入这

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

我试过在阿贾克斯头添加CSRF令牌我main.js

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

这工作完全没我的本地计算机上，但在生产环境（Heroku）上给出相同的错误。

另外，我也试着在阵营Component内个别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上工作？

事情很少;首先，Rails在后台执行某些魔术，以自动将CSRF令牌应用于未获取的请求。所以你不需要做任何这个。它不起作用的事实表明应用程序中的csrf标记设置不正确。我猜这是由于有一个异步登录页面（使用反应而不是传统的HTML表单构建），因此在登录时不会设置CSRF标记。您可以通过从登录帖子收到的信息登录后手动更新CSRF标签来解决此问题。 – gravityplanx

我使用设计的登录表单。我有其他部分使用ajax（不在反应组件），我没有得到任何'无法验证CSRF令牌的真实性.'这些不响应ajax请求的错误，所以我不认为这可能是一个问题与登录页面，可以吗？ – Swojeet

试试这个=>'https：// stackoverflow。com/questions/7203304/warning-cant-verify-csrf-token-authenticity-rails＃answer-43138944' – 7urkm3n

答

可能，这应该起作用。

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

Hey @ 7urkm3n，我添加了'jquery.csrf'和ajax，而我在本地预编译我的资产并将其推送到heroku。但是，如果预编译的资产heroku它说： 'Sprockets :: FileNotFound：找不到类型为'application/javascript''的文件'jquery.csrf' 我在ruby buildpack和预编译之前将nodejs buildpack添加到heroku资产成功，但我得到相同的'无法验证CSRF令牌真实性.'错误。 – Swojeet

你是如何在本地安装的？ – 7urkm3n

你的意思是'jquery.csrf'？我运行了'yarn add jquery.csrf'并在我的'application.js'中包含了'// = require jquery.csrf''。我删除了AJAX请求上拥有CSRF标记的头文件，它在本地和在heroku上工作，但是抛出了这个错误： 'Sprockets :: FileNotFound：无法找到类型为'application/javascript''的文件'jquery.csrf'在Heroku上预编译资源的。 – Swojeet

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

相关推荐