title: React CSRF token issue on first render
body: <p>I need help with csrf token issue.
  Now on first render I am sending get request for CSRF token and then setting it as default header as below.</p>
  <pre><code>const { data } = await publicAxios.get('/csrf-token');
  publicAxios.defaults.headers['X-CSRF-Token'] = data.csrfToken;
  authAxios.defaults.headers['X-CSRF-Token'] = data.csrfToken;
  </code></pre>
  <p>Issue is on first render I am sending another POST requests also but that all requests fails with 403 code because that requests don't have 'X-CSRF-Token' header.
  What can I do to solve this?</p>
  <pre><code>import axios from &quot;axios&quot;;
  import { createContext, useEffect } from &quot;react&quot;;
  
  const FetchContext = createContext();
  const { Provider } = FetchContext;
  
  const FetchProvider = ({ children }) =&gt; {
      const publicAxios = axios.create({ baseURL: '/api' })
      const authAxios = axios.create({ baseURL: '/api' })
      authAxios.interceptors.response.use(
          response =&gt; {
              return response
          },
          error =&gt; {
              return Promise.reject(error)
          }
      );
  
      useEffect(() =&gt; {
          const getCsrfToken = async () =&gt; {
              try {
                  const { data } = await publicAxios.get('/csrf-token');
                  publicAxios.defaults.headers['X-CSRF-Token'] = data.csrfToken;
                  authAxios.defaults.headers['X-CSRF-Token'] = data.csrfToken;
              } catch (err) {
                  console.log(err)
              }
          };
          getCsrfToken();
      }, [authAxios, publicAxios]);
  
      return (
          &lt;Provider value={{ authAxios, publicAxios }}&gt;
              {children}
          &lt;/Provider&gt;
      );
  };
  
  export { FetchContext, FetchProvider }
  </code></pre>
  <p>This is how I am using it</p>
  <pre><code>import { useContext, useEffect, useState } from &quot;react&quot;;
  import { FetchContext } from &quot;../Context/index&quot;;
  
  
  const UsersList = ({ children }) =&gt; {
      const { authAxios } = useContext(FetchContext);
      const [userList, setUserList] = useState(null);
  
      useEffect(() =&gt; {
          async function getUsers() {
              try {
                  const { data } = await authAxios.post(
                      '/users/list'
                  );
                  if (Array.isArray(data) &amp;&amp; data.length &gt; 0) {
                      setUserList(data)
                  } else {
                      setUserList('No');
                  }
              } catch (e) {
                  console.log(e)
                  setUserList('Error')
              }
          }
  
          getUsers()
      }, [authAxios]);
      
      return (
          &lt;div&gt;
              hello
          &lt;/div&gt;
      )
  }
  </code></pre>