javascript - 使用 Carrierwave 发布 gif 时，AJAX 无法验证 CSRF token 的真实性

Question

当我尝试上传普通 jpeg 图像和 png 时，我没有收到来自 AJAX/Rails 的错误。但是，当我尝试上传 gif(已列入白名单)时。它将用户重定向回主页。它声称在表单发布时没有创建csrf_token。使用 create.js.erb 时如何将 csrf_token 添加到表单？

服务器开发日志

Started POST "/posts" for 127.0.0.1 at 2019-02-24 19:39:51 -0500
Processing by PostsController#create as HTML
  Parameters: {"utf8"=>"✓", "post"=>{"body_text"=>"Testing the gif again!", "photo_cache"=>""}, "commit"=>"Post"}
  User Load (1.0ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = $1 ORDER BY "users"."id" ASC LIMIT $2  [["id", 51], ["LIMIT", 1]]
Can't verify CSRF token authenticity.
   (1.0ms)  BEGIN
   (0.0ms)  COMMIT
Completed 401 Unauthorized in 110ms (ActiveRecord: 2.0ms)


Started GET "/login" for 127.0.0.1 at 2019-02-24 19:39:53 -0500
Processing by Devise::SessionsController#new as HTML
  User Load (1.0ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = $1 ORDER BY "users"."id" ASC LIMIT $2  [["id", 51], ["LIMIT", 1]]
Redirected to https://127.0.0.1/
Filter chain halted as :require_no_authentication rendered or redirected
Completed 302 Found in 5ms (ActiveRecord: 1.0ms)


Started GET "/" for 127.0.0.1 at 2019-02-24 19:39:55 -0500
Processing by HomeController#index as HTML

posts_form.html.erb

<%= simple_form_for(@post, multipart: true, remote: true) do |f| %>

  <div class="row">
    <div class="col">
      <div class="post-textarea">
          <%= f.input :body_text, as: :text, class: 'form-control post-placeholder', label: false, placeholder: 'Add a post to share with others', style: "overflow: hidden; resize: none;" %>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-5">
      <%= f.button :submit, 'Post', class: 'form-control submit-button bttn-gradient bttn-md bttn-royal', :data => {:disable_with => 'Wait...a min'} %>
    </div>
    <div class="col-md-5">
       <label class="bttn-minimal bttn-md bttn-royal">
        Add Photo
        <span style="display:none;">
            <%= f.input :photo, as: :file, label: false, input_html: {accept: 'image/*'} %>
            </span>
      </label>
      <% if f.object.photo? %>
        <%= image_tag f.object.photo.url(:feed_preview), class: 'img-responsive img-thumbnail' %>
      <% end %>
      <%= f.hidden_field :photo_cache %>
      <div class="post-preview-container">
        <img id="img_prev" width="100" height="100" src="#" alt="preview" class="img-thumbnail d-none"/> <br/>
        <a href="#" id="cancel_img_btn" class="d-none" onclick="return !(document.getElementById('photo').innerHTML=document.getElementById('photo').innerHTML);">Cancel
      Upload</a>
      </div>
    </div>
  </div>
<% end %>

create.js.erb

$("#container_posts").prepend("<%= j render partial: "posts/#{@post.post_type}", locals: {post: @post } %>");
$("#post_<%= @post.id %>").hide().fadeIn(1000);
$("#no-posts").hide().fadeOut();
$("#body_text").val("");
$("#img_prev").hide().fadeOut();
$("#cancel_img_btn").hide().fadeOut();

Answer 1

你可以尝试这样做。看看这是否有效。

<%= simple_form_for(@post, multipart: true, remote: true, authenticity_token: true) do |f| %>