title: Nuxt: Proxy VS Async data VS Reload page
body: <p>I am building a nuxt application and I am facing an issue with Proxy and Async data.</p>
  
  <p>This is my <strong>nuxt.config</strong>  (simplified)</p>
  
  <pre><code>modules: [
  '@nuxtjs/axios',
  '@nuxtjs/proxy'
  ],
  axios: {
    proxy: true
  },
  proxy: {
    '/api': {
      target: 'http://www.example.com',
      pathRewrite: {
        '^/api': '/'
      }
    }
  }
  </code></pre>
  
  <p>This is my <strong>asyncData</strong> code fragment (simplified):</p>
  
  <pre><code>async asyncData ({ store }) {
    await store.dispatch('fetchData')
  }
  </code></pre>
  
  <p>Store action <strong>fetchData</strong> code (simplified):</p>
  
  <pre><code>async fetchData({ commit }) {
      const response = await myService.fetchData()
      commit('setData', response.data)
  }
  </code></pre>
  
  <p>And at last, <strong>myService</strong> function (simplified):</p>
  
  <pre><code>fetchData () {
      return axios.get('/api/path-to-my-resource')
  }
  </code></pre>
  
  <p><strong>What is expected:</strong>
  To have the service triggering a call to the proxied endpoint, on both cases: visiting the page through a link or refreshing the page</p>
  
  <p><strong>What is happening:</strong>
  When I hit refresh on the page, instead of firing a call to the <strong><a href="http://www.example.com/path-to-my-resource" rel="nofollow noreferrer">http://www.example.com/path-to-my-resource</a></strong>, I see that it tries to do it at <strong>/api/path/to-my-resource</strong> and of course it fails. From what I understand, when I refresh the page, the proxy is not working inside the asyncData hook.</p>
  
  <p>I am pretty sure that there is something that I attempt wrongly, but I cannot find it. Can someone point me towards the right direction?</p>