Estoy trabajando en una aplicación nuxt que usa axios para obtener datos de una API en el backend usando asyncData . También tengo el @nuxtjs/proxy agregado como una dependencia que representa todas mis llamadas a la API.

Cada vez que navego a la página usando un enlace en el lado del cliente, el proxy funciona según lo previsto y elimina el prefijo /api/ de la ruta antes de enviar la solicitud a la API de back-end.

Ejemplo:

1. Solicitudes de clientes: /api/data
2. Tiras de proxy /api/ de la solicitud
3. Ruta resultante a la API: http://example.com/data

Sin embargo, el problema con el que me encuentro es en las actualizaciones de la página. El módulo proxy no puede quitar /api/ de la ruta, lo que da como resultado una ruta que no existe en la API

Ejemplo:

• Ruta deseada: http://example.com/data
• Ruta al actualizar: http://example.com/api/data

Aquí está mi nuxt.config.js simplificado:

 export default { components: true, modules: [ '@nuxtjs/axios', '@nuxtjs/proxy', ], axios: { proxy: true, }, proxy: { '/api/': { target: process.env.API_URL, pathRewrite: { '^/api/': '' } }, } }

Aquí hay una versión simplificada de mi página .Vue :

 <template> <div>This is a vue Page</div> </template> <script> export default { name: 'VuePage', async asyncData({ error, query, $axios }) { try { const { data } = await $axios.get('/api/data', { params: query }); return { data, }; } catch (err) { error({ statusCode: err.response.status, message: err.response.data.message, }); } }, }; </script>

Ya revisé otra pregunta en StackOverflow sin una buena respuesta sólida.

Se hizo una pregunta similar, Nuxt: Proxy VS Async data VS Reload page

La pregunta se marcó como respondida sin dar ninguna explicación de cómo se resolvió el problema.