title: Why is Axios not including XSRF-TOKEN when POSTing from React sub-component?
body: <p>I have a Laravel 6.x app that I'm working on. Axios seems to not be consistent about when it sends XSRF-TOKEN headers.</p>
  
  <p>Then I have two pages within the app that need to do axios posts. One of which works correctly, the other - which does the actual post from a Component included within a Component -
   excludes the header and fails.</p>
  
  <p>The common files are </p>
  
  <p>js/app.js</p>
  
  <pre><code>require('./bootstrap');
  </code></pre>
  
  <p>js/bootstrap.js</p>
  
  <pre><code>window.axios = require('axios');
  //snip
  let token = document.head.querySelector('meta[name="csrf-token"]');
  
  if (token) {
      window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
  } else {
      console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
  }
  </code></pre>
  
  <p>layouts/reactapp.blade.php</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="{{ app()-&gt;getLocale() }}"&gt;
  &lt;head&gt;
      &lt;meta name="csrf-token" content="{{ csrf_token() }}"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      @yield('reactContainer')
      &lt;script src="{{ asset('js/app.js') }}"&gt;&lt;/script&gt;
      @yield('components')
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <hr>
  
  <p>The working page is
  orders/create.blade.php</p>
  
  <pre><code>@extends('layouts.reactapp')
  
  @section('reactContainer')
      &lt;div id='orders-create'&gt;&lt;/div&gt;
  @endsection
  
  @section('components')
      &lt;script src="{{ asset('js/components/Orders.js') }}"&gt;&lt;/script&gt;
  @endsection
  </code></pre>
  
  <p>js/components/Orders.js</p>
  
  <pre><code>import React, { Component } from 'react';
  import {Page} from '@shopify/polaris';
  import ReactDOM from 'react-dom';
  
  export default class Orders extends Component {
      constructor(props) {
          super(props);
          this.onFormSubmit = this.onFormSubmit.bind(this);
          this.handleFileUpload = this.handleFileUpload.bind(this);
      }
      render() {
          return (
              &lt;Page
                  title="Orders"
                  primaryAction={{
                      content: 'Submit',
                      onAction: this.onFormSubmit,
                  }}
              &gt;&lt;!-- snip --&gt;&lt;/Page&gt;
          );
      }
      onFormSubmit() {
          this.handleFileUpload().then((response) =&gt; { /*snip*/ });
      }
      handleFileUpload() {
          return window.axios.post(url, formData, config);
      }
  };
  if (document.getElementById('orders-create')) {
      ReactDOM.render(&lt;Orders /&gt;, document.getElementById('orders-create'));
  }
  </code></pre>
  
  <hr>
  
  <p>The non-working page is
  shopify/settings.blade.php</p>
  
  <pre><code>@extends('layouts.reactapp')
  
  @section('reactContainer')
      &lt;div id='shopify-setting'&gt;&lt;/div&gt;
  @endsection
  
  @section('components')
      &lt;script src="{{ asset('js/components/Setting.js') }}"&gt;&lt;/script&gt;
  @endsection
  </code></pre>
  
  <p>js/components/Setting.js</p>
  
  <pre><code>import React, { Component } from 'react';
  import ReactDOM from 'react-dom';
  import SettingCheckbox from './fields/SettingCheckbox.js';
  export default class Setting extends Component {
      render() {
          return (
              return &lt;SettingCheckbox
                  setting={setting}
                  key={setting.id}
              /&gt;
          );
      }
  }
  if (document.getElementById('shopify-setting')) {
      ReactDOM.render(&lt;Setting /&gt;, document.getElementById('shopify-setting'));
  }
  </code></pre>
  
  <p>js/component/SettingCheckbox.js</p>
  
  <pre><code>import { Button } from '@shopify/polaris';
  import React, { Component } from 'react';
  
  export default class SettingCheckbox extends Component {
      constructor(props) {
          super(props);
          this.updateSetting = this.updateSetting.bind(this);
      }
      render() {
          return(
              &lt;Button onclick={this.updateSetting}&gt;Update&lt;/Button&gt;
          );
      }
      updateSetting() {
          window.axios.patch(url, formData).then(/*snip*/);
      }
  }
  </code></pre>
  
  <hr>
  
  <p>I don't see any critical difference between these two. It should be the same axios object either way, why would it behave any differently in a nested component?</p>