jquery - 表单中的 dropzone - InvalidAuthenticityToken

Question

我使用拖放区作为表单的一部分。 IE。除了 dropzone 字段之外，表单还有其他元素。另外，表单提交后不会加载新 View ，只是一些js代码，所以remote = true。表格如下所示:

<%= form_tag submit_form_path, method: "POST", "data-abide" => "", 'autocomplete' => 'off', id: "id-of-form", remote: true, multipart: true do %>

<div class="dropzone" id="myDropzone"></div>
<%= text_field_tag "name",     ....
<%= text_field_tag "number", "",  ....
<%= text_field_tag "email", "",   ....
<%= submit_tag "submit", id: "submit-button" ....

<% end %>

JS

Dropzone.options.myDropzone = {
 url: '/submit_form',
 autoProcessQueue: false,
 uploadMultiple: true,
 parallelUploads: 5,
 maxFiles: 5,
 maxFilesize: 1,
 acceptedFiles: 'image/*',
 addRemoveLinks: true,
 init: function() {
    dzClosure = this; 

    // for Dropzone to process the queue (instead of default form behavior):
    document.getElementById("submit-button").addEventListener("click", function(e) {
        // Make sure that the form isn't actually being sent.
        e.preventDefault();
        e.stopPropagation();
        dzClosure.processQueue();
    });

    //send all the form data along with the files:
    this.on("sendingmultiple", function(data, xhr, formData) {
        formData.append("name", jQuery("#name").val());
        *the rest of the form elements*
    });
}

}

提交表单后，我收到 Can't verify CSRF token authenticity
在 2 毫秒内完成 422 个无法处理的实体
ActionController::InvalidAuthenticityToken

更新:解决了真实性 token 无效的问题。但是，现在我收到 ActionView::MissingTemplate - Missing template 错误。在 dropzone 添加到表单之前。我成功地提交了表单并执行了一些 js 代码 (submit_details.js.erb)，而无需重新加载页面。

但现在是

Processing by XyzController#submit_details as JSON

和

ActionView::MissingTemplate - Missing template xyz/submit_details, application/submit_enquiry with {:locale=>[:en], :formats=>[:json], :variants=>[], :handlers=>[:erb, :builder, :raw, :ruby, :coffee, :arb, :jbuilder]}.

Controller :

我评论了一切，功能只是

def submit_enquiry 
   #commented stuff
   puts "checking "
   respond_to do |format|          
    format.html    
    format.js
    format.json { render :json => true } 
   end
end

日志是:

于 2016-10-05 14:28:00 +0800 开始对 127.0.0.1 发布“/submit_form”

14:28:00 web.1 |由 XyzController#submit_details 作为 JSON 处理

14:28:00 web.1 |参数:{"firstname"=>"something", "lastname"=>"something", "file"=>{"0"=>#, @original_filename="filename.png", @content_type="image/png ", @headers="Content-Disposition: form-data; name=\"file[0]\"; filename=\"filename.png\"\r\nContent-Type: image/png\r\n"> }, “语言”=>“en”}

14:28:00 web.1 |检查

14:28:00 web.1 | 2ms 内完成 406 Not Acceptable 14:28:00 网络.1 |14:28:00 网络.1 | ActionController::UnknownFormat - ActionController::UnknownFormat:

Answer 1

尝试将 header 添加到您的 Dropzone 请求

Dropzone.options.myDropzone = {
  url: '/submit_form',
  autoProcessQueue: false,
  ...
  headers: {
    'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
  }
}