title: Can't verify CSRF Token in Rails + React App
body: <p>I have an app which uses Rails and React. The AJAX in rails part works fine but I have some components in React which use AJAX and the error occurs in the AJAX requests through React components.</p>
  
  <p>I get the following error:</p>
  
  <pre><code>2017-10-17T15:36:26.933083+00:00 app[web.1]: [14b2fc9e-80b7-490f-b905-
  5be9f6839c5b] Started POST "/quiz_submissions" for 162.158.165.188 at 2017-10-17 15:36:26 +0000
  2017-10-17T15:36:26.935109+00:00 app[web.1]: [14b2fc9e-80b7-490f-b905-
  5be9f6839c5b] Processing by QuizSubmissionsController#create as JSON
  2017-10-17T15:36:26.935151+00:00 app[web.1]: [14b2fc9e-80b7-490f-b905-5be9f6839c5b]   Parameters: {"quiz_submission"=&gt;{"quiz_problem_id"=&gt;"21", "checked_option_ids"=&gt;["88"]}}
  2017-10-17T15:36:26.935688+00:00 app[web.1]: [14b2fc9e-80b7-490f-b905-5be9f6839c5b] Can't verify CSRF token authenticity.
  2017-10-17T15:36:26.936459+00:00 app[web.1]: [14b2fc9e-80b7-490f-b905-5be9f6839c5b] Completed 422 Unprocessable Entity in 1ms (ActiveRecord: 0.0ms)
  2017-10-17T15:36:26.937451+00:00 app[web.1]: [14b2fc9e-80b7-490f-b905-5be9f6839c5b]   
  2017-10-17T15:36:26.937485+00:00 app[web.1]: [14b2fc9e-80b7-490f-b905-5be9f6839c5b] ActionController::InvalidAuthenticityToken (ActionController::InvalidAuthenticityToken):
  </code></pre>
  
  <p>I've tried adding the CSRF Token in ajax header by adding this to my <code>main.js</code></p>
  
  <pre><code>$.ajaxSetup({
    beforeSend: function(xhr) {xhr.setRequestHeader('X-CSRF-Token', 
    $('meta[name="csrf-token"]').attr('content'))},
  });
  </code></pre>
  
  <p>This works completely fine on my local machine but gives the same error on production environment(Heroku).</p>
  
  <p>Alternatively, I've also tried adding the CSRF Token in the header of individual ajax requests inside the React Component as follows:</p>
  
  <pre><code>$.ajax({
        dataType: 'JSON',
        type: 'POST',
        url: '/quiz_submissions',
        context: this,
        headers: {
            'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
        },
        data: {
          ...
          }
        }
  </code></pre>
  
  <p>This approach also works fine locally but gives the same <code>Can't verify CSRF token authenticity.</code> error on production. </p>
  
  <p>I have <code>&lt;%= csrf_meta_tags %&gt;</code> on my head section and I also have <code>//= require jquery_ujs</code> on my <code>application.js</code></p>
  
  <p>Any idea why it doesn't work on production environment on Heroku?</p>