Vue How to fix 404 error when using nuxt proxy and nuxt axios

Question

In my vue-app I'm using the @nuxtjs/proxy together with @nuxtjs/axios but for some reason I don't know, I always get an Request failed with status code 404 -error when calling the api.

Here is my nuxt.config.js

modules: [
 '@nuxtjs/axios',
 '@nuxtjs/proxy'
],

axios: {
  proxy: true,
},

proxy: {
  "/api": {
    target: "https://url-to-api.com/api",
    pathRewrite: { "^/api/": "" },
  } 
},

then in my vue-component

created(){
  const { data } = await this.$axios.get(
    `/api/products/all`
  )
  ...
}

when I check on the network tab, the request is:

https://mypage.com/api/products/all

that request returns like mentioned above Request failed with status code 404

What am I doing wrong?

Answer 1

nuxt version: 2.15.8

Try this:

// nuxt.config.js

axios: {
  baseURL: '/',
  browserBaseURL: '/',
  proxy: true,
},

proxy: {
  '/api/': {
    target: process.env.BASE_URL,
    pathRewrite: {'^/api/': ''},
  },
},

publicRuntimeConfig: {
  axios: {
    browserBaseURL: process.env.BROWSER_BASE_URL,
  },
},

privateRuntimeConfig: {
  axios: {
    baseURL: process.env.BASE_URL,
  },
},

and in your component:

created(){
  const { data } = await this.$axios.get(
    `products/all`
  );
}

in .env:

BROWSER_BASE_URL=/api/
BASE_URL=https://url-to-api.com/api/

it works for me.