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:
- Solicitudes de clientes:
/api/data
- Tiras de proxy
/api/
de la solicitud- 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.
Pude encontrar una solución en forma de un complemento que parece resolver el problema.
El complemento se basa en una publicación de reddit del usuario wiked03
y está diseñado para eliminar /api/
de la solicitud
Cree una carpeta en la raíz de su proyecto llamada plugins
y cree un archivo llamado axios.js
Agregue este código a ./plugins/axios.js
// ./plugins/axios.js export default function ({ $axios }) { $axios.onRequest((config) => { if (process.server) { config.url = config.url.replace('/api/', process.env.API_URL) } }) }
Localice su archivo de configuración nuxt.config.js
y edítelo de la siguiente manera:
// ./nuxt.config.js export default { // ~~~~ Some Configs ~~~~ // plugins: ['~/plugins/axios.js'], }
Fuente: