Nuxt: Proxy VS Async data VS Reload page - proxy

Question

I am building a nuxt application and I am facing an issue with Proxy and Async data.
This is my nuxt.config (simplified)
modules: [
'#nuxtjs/axios',
'#nuxtjs/proxy'
],
axios: {
proxy: true
},
proxy: {
'/api': {
target: 'http://www.example.com',
pathRewrite: {
'^/api': '/'
}
}
}
This is my asyncData code fragment (simplified):
async asyncData ({ store }) {
await store.dispatch('fetchData')
}
Store action fetchData code (simplified):
async fetchData({ commit }) {
const response = await myService.fetchData()
commit('setData', response.data)
}
And at last, myService function (simplified):
fetchData () {
return axios.get('/api/path-to-my-resource')
}
What is expected:
To have the service triggering a call to the proxied endpoint, on both cases: visiting the page through a link or refreshing the page
What is happening:
When I hit refresh on the page, instead of firing a call to the http://www.example.com/path-to-my-resource, I see that it tries to do it at /api/path/to-my-resource and of course it fails. From what I understand, when I refresh the page, the proxy is not working inside the asyncData hook.
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?

Answer 1

Try something like:
proxy: {
'/api/': { target: 'http://www.example.com', pathRewrite: {'^/api/': ''} }
// ^^^^^ ^^^^^^ ^^
// Note the ending slashes.
// And the rewrite rule.
}
That's how the docs are written:
http (ky) module: https://http.nuxtjs.org/api/#proxy
Axios module: https://axios.nuxtjs.org/options#proxy