使用不同的布局时，Rails Authenticity Token无效

Question

我有一个rails应用程序，它使用模态将数据发布到控制器并将其保存到数据库。当使用我原来的“原始”布局时，流程工作得很好，但是在实现新的自举主题布局之后，当我尝试提交时，我得到了无效的CRSF错误。

如果我将控制器上的布局更改为原始布局，则可以正常工作。

运行该click / post方法的JS如下：

$(document).on("click",".clickable", function(){
  var link = $(this).data('link')
    console.log(link);
    $.ajax({
      url: link,
      type: "POST",
    });
});

除了控制器的布局之外，代码中的任何内容都没有变化，就像我提到的那样，如果我将布局更改回原来的布局，它就可以正常工作。我可以在新布局的javascript中丢失javascript文件或其他内容吗？

新布局js文件：stack.js

//= require jquery3
//= require popper
//= require rails-ujs
//= require bootstrap
//= require stack/vendors/vendors.min
//= require stack/vendors/charts/raphael-min
//= require stack/vendors/charts/morris.min
//= require stack/vendors/extensions/unslider-min
//= require stack/vendors/timeline/horizontal-timeline
//= require stack/core/app-menu
//= require stack/core/app
//= require stack/scripts/pages/dashboard-ecommerce
//= require_tree ./common

旧布局js文件：application.js

//= require jquery3
//= require popper
//= require rails-ujs
//= require bootstrap
//= require_tree ./common

特定于新模板的所有js文件都位于javascripts主文件夹下的“堆栈”文件夹中，这就是为什么上面只包含./common的原因。我不希望包含堆栈下的所有文件，因为有很多文件我还没有连接或删除。

有什么想法吗？

错误：

    Started POST "/add_interest?city_id=59020&name=Mission+District%2C+San+Francisco%2C+California%2C+US&region_id=128085&type=region" for 127.0.0.1 at 2019-02-16 13:30:02 -0800
Processing by InterestsController#create as */*

      Parameters: {"city_id"=>"59020", "name"=>"Mission District, San Francisco, California, US", "region_id"=>"128085", "type"=>"region"}
    Can't verify CSRF token authenticity.
    Completed 422 Unprocessable Entity in 1ms (ActiveRecord: 0.0ms)



    ActionController::InvalidAuthenticityToken - ActionController::InvalidAuthenticityToken:
`

Answer 1

由于您使用的是Rails-ujs，您可以使用它已经为您处理令牌的ajax方法：

https://github.com/rails/rails/blob/master/actionview/app/assets/javascripts/rails-ujs/utils/ajax.coffee#L15

$(document).on("click",".clickable", function(){
  var link = this.dataset.link;
  console.log(link);
  Rails.ajax({
    url: link,
    type: "POST",
  });
});

Answer 2

试试这样：

$(document).on("click",".clickable", function(){
  var link = $(this).data('link')
    console.log(link);
    $.ajax({
      url: link,
      beforeSend: function(xhr) {xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'))},
      method: "POST",
      dataType: "json",
      data: {}
    });
});