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 and making fetch async), 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

[juretopolak]

@bagaskarala .env variable named API_URL was causing me problems since it overrides baseURL config of ‘@nuxtjs/axios’. I prepared a demo project when I was looking for help and updated it with a “solution”: https://github.com/juretopolak/nuxt-axios-proxy-ssr-demo

@xlanex6 if you also named your .env variable API_URL maybe you are facing the same problem.

[bagaskarala]

i’m also facing this issue, then i’ve resolved it. To call backend api, set this env API_URL: http://backend.com. then i use this setting:

 axios: {
    proxy: true,
    prefix: '/api/'
  },

  proxy: {
    '/api/': {
      target: API_URL,
      pathRewrite: { '^/api/': '' }
    }
  },

i proxied request HOST/api to actual backend url, it will work on server and client slide request. note: HOST can be your localhost (dev) or your frontend url (production)