• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

383
Vistas
@Nuxtjs/proxy module path not rewriting on page refresh

I am working on a nuxt application which uses axios to get data from an API on the backend using asyncData. I also have the @nuxtjs/proxy module added as a dependency which proxies all of my API calls.

Whenever I navigate to the page using a link on the client side, the proxy works as intended and removes the /api/ prefix from the path before sending the request to the backend API.

Example:

  1. Client requests: /api/data
  2. Proxy strips /api/ from request
  3. Resulting path to api: http://example.com/data

However, the issue I am running into is on page refreshes. The proxy module is failing to strip /api/ from the path resulting in a path that does not exist on the api

Example:

  • Desired path: http://example.com/data
  • Path on refresh: http://example.com/api/data

Here is my simplified nuxt.config.js:

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

Here is a simplified verson of my .Vue page:

<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>

I have already checked out some other question on StackOverflow with no good solid answer.

A similar question asked was, Nuxt: Proxy VS Async data VS Reload page

The question was marked as answered with no explanation given of the how the problem was solved.

about 3 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

I was able to find a workaround in the form of a plugin that appears to resolve the issue.

The plugin is based off a reddit post by user wiked03 and is designed to strip /api/ from the request

Create the plugin

Create a folder in your project root called plugins and create a file called axios.js

Add this code to ./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)
    }
  })
}

Configure NUXT to use the Axios plugin

Locate your your nuxt config file nuxt.config.js and edit it as follows:

// ./nuxt.config.js

export default {
  // ~~~~ Some Configs ~~~~ //
  plugins: ['~/plugins/axios.js'],
}

Source:

  • Reddit Post - wiked03
about 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda