SSR: Axios request fails with 404 when using a proxy

I’m using Laravel Lumen for the backend, which is on a different domain, so I have to use a proxy to be able to share the cross-origin resource.

Everything works fine on the client-side, but when enabling universal mode and trying to get a prerendered site with the first request products are not rendered because Axios request fails with status code 404.

After enabling Axios debugging I have noticed that ‘api’ string is still in the requested URL, but it shouldn’t be, because of the pathRewrite rule:

    proxy: {
        '/api': {
            target: process.env.API_URL,
            pathRewrite: {
                '^/api': '/'
            },
            changeOrigin: true
        }
    }

When modifying code like this (removed ‘api’ in the request path), Axios request works, but then of course doesn’t on the client.

What can I do to make the request work on the client and server side?

Nuxt.js v2.12.1

[pjnicolas]

Maybe it’s because the API_URL env variable is overriding the baseURL parameter. IDK if that’s what you want here. Try using a different name.

[nasirDoe]

try to following this code bellow:

nuxt.config.js

modules: ['@nuxtjs/axios', '@nuxtjs/proxy'],
axios: {
proxy: true,
host: 'localhost',
prefix: '/api/',
headers: { //optional
    Accept: 'application/json',
    'Content-Type': 'application/json',
  }
},
proxy: {
    '/api/': {
      target: process.env.API_URL,
      pathRewrite: { '^/api/': '' },
    },
  },