2017-10-17 36 views
0

我有一个使用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_ujsapplication.js

任何想法,为什么它不生产环境在Heroku上工作?

+0

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

+0

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

+0

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

回答

0

可能,这应该起作用。

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

+0

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

+0

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

+0

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

相关问题