Rails 5 InvalidAuthenticityToken Coffeescript

Question

У меня проблемы с использованием кофе по ajax-запросу на событие изменения для выбранного входа.

Мой настоящий скрипт работает на событиях:

$ ->
  $(document).ready ->
    $(document).on 'change', '#empresa_id', (evt) ->
      $.ajax '/empleados/find_branches',
        type: 'POST'
        dataType: 'json'
        data: {
          id: $("#empresa_id option:selected").val()
        }
        error: (jqXHR, textStatus, errorThrown) ->
          console.log(jqXHR)
          console.log(textStatus)
          console.log(errorThrown)
          console.log("AJAX Error: #{textStatus}")
        success: (data, textStatus, jqXHR) ->
          for key, value of data['data']
            $('#sucursales_id').append($('<option>').text(value.nombre).attr('value', value.id));

У меня на application.html.erb:

<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

На application.js:

//= require rails-ujs
//= require jquery3
//= require activestorage
//= require turbolinks
//= require_tree .
//= require popper
//= require bootstrap

Но я все еще получаю:

Can't verify CSRF token authenticity.
Completed 422 Unprocessable Entity in 1ms (ActiveRecord: 0.0ms)
ActionController::InvalidAuthenticityToken (ActionController::InvalidAuthenticityToken)

Я знаю, что // = require rails-ujs фактически добавляет токен в заголовок запроса, но в браузере не показывает его.

Я уже делаю рейк-активы: прекомпиляция.

Я что-то упустил?

Answer 1

$ ->
  $(document).ready ->
    $(document).on 'change', '#empresa_id', (evt) ->
      $.ajax '/empleados/find_branches',
        type: 'POST'
        dataType: 'json'
        beforeSend: (xhr) -> xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'))
        headers: {
              'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
        }
        data: {
          id: $("#empresa_id option:selected").val()
        }
        error: (jqXHR, textStatus, errorThrown) ->
          console.log(jqXHR)
          console.log(textStatus)
          console.log(errorThrown)
          console.log("AJAX Error: #{textStatus}")
        success: (data, textStatus, jqXHR) ->
          for key, value of data['data']
            $('#sucursales_id').append($('<option>').text(value.nombre).attr('value', value.id));

Добавить beforeSend и headers