title: How to set global $axios header in NuxtJS
body: <p>I've been trying to get this to work for two days now. I'm a brand new user to Nuxt (although I've used Vue for a few years now), so I'm just trying to wrap my brain around how this all works. </p>
  
  <p>In my Nuxt project I have the Axios module installed:</p>
  
  <p><em>nuxt.config.js</em></p>
  
  <pre><code>export default {
    plugins: [
      ...
      '~/plugins/axios',
    ],
    axios: {
      baseURL: 'https://my-url.com/wp-json/wp-v2',
      https: true,
    },
  }
  </code></pre>
  
  <p><em>plugins/axios.js</em></p>
  
  <pre><code>export default ({ $axios, env }) =&gt; {
    $axios.onRequest(config =&gt; {
      $axios.setToken(env.WP_API_KEY, 'Bearer');
    });
  }
  
  </code></pre>
  
  <p>And in my page, I'm trying to use the <code>asyncData</code> function to pull data from my WordPress API, as such:</p>
  
  <pre><code>export default {
    async asyncData(context) {
      const data = await context.$axios.$get('/media');
      console.log(data);
      return { data };
    }
  }
  </code></pre>
  
  <p>I keep receiving a 401 Not Authorized error however, essentially stating that my <code>Authorization: Bearer &lt;token&gt;</code> isn't being passed through. Using Postman however, I can verify that this endpoint does indeed work and returns all of the JSON I need, so the problem must lie in the way I have the axios global header set up. </p>
  
  <p>It's been tough finding any real example on how to set a global header using the Nuxt/Axios module. I see in the <a href="https://axios.nuxtjs.org/helpers.html#settoken" rel="noreferrer">docs</a> how to use <code>setToken</code>, however it doesn't exactly show where to place that.</p>
  
  <p>What do I have set up wrong, and how do I fix it?</p>