개요

Ruby on Rails에서 양식에서 유효성 검사 오류가 발생한 후 화면을 다시로드 할 때 URL에 대한 요청 메서드가 POST가 아닌 GET이되어 문제가 발생했습니다.
어떻게 그 문제를 해결하면 좋은지, 조사해도 곧 알 수 없었기 때문에, 본 기사에서는 그 대처법 등에 대해 정리합니다.

환경

Ruby 2.6.4
Ruby on Rails 5.2.3
Turbolinks 5.2.1

문제

기대했던 움직임

양식에서 유효성 검사 오류가 발생한 후 화면을 다시로드하면,
화면상에 「폼 재전송의 확인」이라고 하는 다이얼로그가 나온다.

실제 움직임

URL에 대한 요청 메소드가 POST가 아닌 GET이되어 버려,
GET 메소드에서/users로의 라우팅이 없기 때문에, 그 취지의 에러 화면이 표시되어 버렸다.

원인

Turbolinks 때문입니다.
Turbolinks가 history api로 히스토리를 조작하고 있어, history api에 히스토리를 더할 때는 GET 메소드로의 URL 밖에 더할 수 없기 때문에, URL을 GET로 취득하려고 하는…인 것 같습니다.
솔직한 곳은 몰랐습니다.

Turbolinks는 js와 css의 읽기 처리를 생략하여 화면 전환을 가속화하는 내장 라이브러리입니다.
자세한 내용은 아래 기사를 참조하십시오.

Turbolinks5에 대해 정리해보기

"Turbolinks"는 무엇입니까?

대처법

1. application.js에서 //= require turbolinks를 제거합니다.

Before

app/assets/javascripts/application.js

//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require_tree .

After

app/assets/javascripts/application.js

//= require rails-ujs
//= require activestorage
//= require_tree .

이렇게하면 문제가 해결되지만 Turbolinks는 더 이상 필요하지 않으므로 다음 단계를 진행해 보겠습니다.

2. Gemfile에서 gem 'turbolinks'를 제거합니다.

Before

Gemfile

# (前略)
gem 'coffee-rails', '~> 4.2'
gem 'turbolinks', '~> 5'
gem 'jbuilder', '~> 2.5'
# (後略)

After

Gemfile

# (前略)
gem 'coffee-rails', '~> 4.2'
gem 'jbuilder', '~> 2.5'
# (後略)

3. application.html.erb에서 data-turbolinks-track': 'reload'를 제거합니다.

Before

app/views/layouts/application.html.slim

doctype html
html
  head
    title
      | Application
    = csrf_meta_tags
    = csp_meta_tag
    = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload'
    = javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
# (後略)

After

app/views/layouts/application.html.slim

doctype html
html
  head
    title
      | Application
    = csrf_meta_tags
    = csp_meta_tag
    = stylesheet_link_tag    'application', media: 'all'
    = javascript_include_tag 'application'
# (後略)

참고

Turbolinks doesn't recognize form re-submission [POST] and navigates instead [GET].

Turbolinks5에서 POST 할 때는 ajax를 통한 것이 더 좋을 것입니다.