Как отправить ajax-форму в Rails 6 с Webpack? Получение ActionController :: InvalidAuthenticityToken ошибка - PullRequest
Новая
       20

Как отправить ajax-форму в Rails 6 с Webpack? Получение ActionController :: InvalidAuthenticityToken ошибка

0 голосов
/ 17 октября 2019

все!

Я сопровождаю видео на GoRails о том, как создать приложение для чата с использованием кабеля действий. Я верю, что в видео используется Rails 5, но я хотел попробовать его с Rails 6.

Пока все шло отлично. Установил Bootstrap и jQuery и правильно настроил мой environments.js файл. Это было потрясающе. Затем я перехожу к части прямо перед тем, как мы добавим кабель действий, и мы делаем удаленную форму чата: true.

Я не могу понять, почему моя форма все еще пытается отправить как HTML вместо JS. Кроме того, я получаю ошибку ActionController::InvalidAuthenticityToken.

Вот как я настраиваю свою форму: 

<%= simple_form_for [@chatroom, Message.new], remote: true, html: { id: 'message-input' } do |f| %>
  <%= f.input :body, label: false, input_html: { rows: 1, autofocus: true } %>
<% end %>

При отправке я получаю эту ошибку на своем сервере rails: 

Started POST "/chatrooms/1/messages" for ::1 at 2019-10-16 21:02:01 -0500
Processing by MessagesController#create as HTML
  Parameters: {"message"=>{"body"=>"test3"}, "chatroom_id"=>"1"}
Can't verify CSRF token authenticity.
Completed 422 Unprocessable Entity in 1ms (ActiveRecord: 0.0ms | Allocations: 968)



ActionController::InvalidAuthenticityToken - ActionController::InvalidAuthenticityToken:

Started POST "/__better_errors/cf3c4e5c6fa2d1b1/variables" for ::1 at 2019-10-16 21:02:01 -0500

Не уверен, что делать. Я гуглил и сталкивался с этим, но я не уверен, что это полностью применимо: Использование Rails-UJS в модулях JS (Rails 6 с webpacker)

Любая помощь будет принята с благодарностью!

Ответы [ 2 ]

0 голосов
/ 19 октября 2019

Итак, оказалось, что мне пришлось использовать form_with вместо form_for, чтобы заставить его обрабатывать как JS. Я полагаю, form_for замедляется из-за устаревания?

Моя форма теперь выглядит следующим образом: 

<%= form_with(model: [@chatroom, Message.new]) do |f| %>
  <%= f.text_field :body %>
<% end %>

, и результат - это то, что я ожидал без необходимости передавать токен CSRF с JSили пропустить действие до в контроллере. 

Started POST "/chatrooms/1/messages" for ::1 at 2019-10-18 20:15:14 -0500
Processing by MessagesController#create as JS
  Parameters: {"authenticity_token"=>"xPBQ+4LOS5aMa7PQ3HEGXAMX6wIIEfQ0Izy/xUqUtleK4mB18IYxC4mOcIoiS5M+FGm6J/WEYMdbM4IVPojScw==", "message"=>{"body"=>"test 5"}, "chatroom_id"=>"1"}
  User Load (0.8ms)  SELECT "users".* FROM "users" WHERE "users"."id" = $1 ORDER BY "users"."id" ASC LIMIT $2  [["id", 1], ["LIMIT", 1]]
  Chatroom Load (0.3ms)  SELECT "chatrooms".* FROM "chatrooms" WHERE "chatrooms"."id" = $1 LIMIT $2  [["id", 1], ["LIMIT", 1]]
  ↳ app/controllers/messages_controller.rb:19:in `set_chatroom'
   (0.1ms)  BEGIN
  ↳ app/controllers/messages_controller.rb:12:in `create'
  Message Create (0.7ms)  INSERT INTO "messages" ("chatroom_id", "user_id", "body", "created_at", "updated_at") VALUES ($1, $2, $3, $4, $5) RETURNING "id"  [["chatroom_id", 1], ["user_id", 1], ["body", "test 5"], ["created_at", "2019-10-19 01:15:14.619853"], ["updated_at", "2019-10-19 01:15:14.619853"]]
  ↳ app/controllers/messages_controller.rb:12:in `create'
   (5.6ms)  COMMIT
  ↳ app/controllers/messages_controller.rb:12:in `create'
Redirected to http://localhost:3000/chatrooms/1
Completed 200 OK in 17ms (ActiveRecord: 7.6ms | Allocations: 4690)
0 голосов
/ 17 октября 2019

При запросе POST запросов на рельсы authenticity_token проверяется.

В запросе от javascript вам необходимо добавить заголовок: 'X-CSRF-Token': csrfToken.

Вы можете получитьcsrfToken со следующим JS: 

const csrfToken = document.querySelector('[name="csrf-token"]').getAttribute('content');

Другое решение состоит в том, чтобы отключить verify_authenticity_token, вы можете добавить это к своему application_controller.rb, чтобы отключить его, или вы можете добавить его к конкретному контроллеру: 

skip_before_action :verify_authenticity_token
...