SSR: Axios request fails with 404 when using a proxy

[juretopolak]

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]

After a few days, I still couldn't find a solution to my problem so I have prepared a demo project. https://github.com/juretopolak/nuxt-axios-proxy-ssr-demo I don't know if this is a bug in '@nuxtjs/axios' or '@nuxtjs/proxy' or have I just misconfigured everything? It would be much appreciated if anyone could help.

[jdinartejesus]

I'm having the same issues, tried everything and nothing worked too.

[juretopolak]

After a few days and a lot of wasted time, I found out that the environment variable in .env is changing Axios's baseURL. It's used to set the proxy target URL in different environments. Even if I hardcode proxy target URL and don't use this variable anywhere in the Nuxt config, it's still somehow loaded and affects Axios baseUrl which resolves to the Axios request with a status code 404. When I just deleted this variable and restarted the dev server, SSR rendered the content after a successful request in the fetch() hook.

With empty .env:

baseURL: 'http://localhost:3000/'
status: 'OK'
code: 200

API_URL="https://domain.tld/api/" in .env

baseURL: 'https://domain.tld/api/'
status: 'Not found'
code: 404

Maybe this helps someone.

If anyone knows how env variable changes baseUrl... I'm all ears :)

[beporter]

The Axios docs in the Nuxt docs mention this: https://axios.nuxtjs.org/options/#baseurl

baseURL

• Default: http://[HOST]:[PORT][PREFIX]

Defines the base URL which is used and prepended to make server side requests.

Environment variable API_URL can be used to override baseURL.

WARNING: baseURL and proxy cannot be used at the same time, so when the proxy option is in use, you need to define prefix instead of baseURL.

I'm still working through exactly how all the pieces fit together myself, which is how I found this issue.

More examples of usage (and associated Nuxt configs) would go a long way here.

[juretopolak]

@beporter exactly this was the problem, found out later... I was obviously very lucky with the name of the .env variable. :)

[xlanex6]

stuck on the same issue. Find solution ? fix hack ?

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

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

[gergo-tar]

You can also set the base url for axios to avoid the name conflict @juretopolak mentioned and then you can use API_URL in your .env: AXIOS_BASE_URL=http://localhost:3000 API_URL=http://myapi.test/api/v1

[lkjimy]

Had the same issue, thanks for all the help here I got my setup working.

The @nuxt/axios have a few options to work with enviroment variables. The important ones are baseURL and browserBaseURL, both can be defined by API_URL and API_URL_BROWSER. There's a bunch of details there and I may play around with the runtimeConfig later.

In my setup I only defined API_URL for now, and I'll figure out the API_URL_BROWSER later, in production.

# .env

API_URL=http://0.0.0.0:8000/
PROXY_API_URL=http://0.0.0.0:3000
HOST=0.0.0.0
PORT=8000

// nuxt.config.js

axios: {
  proxy: true
},

proxy: {
  '/api/': {
    target: process.env.PROXY_API_URL,
    pathRewrite: { '^/api/': '' }
  },
  '/api2/': {
    target: 'https://pokeapi.co/api/v2/',
    pathRewrite: { '^/api2/': '' }
  },
  '/api3/': {
    target: 'http://shibe.online/api/',
    pathRewrite: { '^/api3/': '' }
  }
}

All requests working nicely on both client and server. The big issue here is that enviroment variables are being used by both modules and is a bit hard to figure out what happens in each case, specially when debuging on server side is awful.