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), 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.

[jhull]

Not sure if this will help you out, but I've been having some issues with something that changed yesterday in the Nuxt ecosystem. Rebuilt my entire app from scratch this morning, and ended up having proxy issues. Was going to leave a comment here joining your distress, until I added back in this key:

  publicRuntimeConfig: {
    axios: {
      baseURL: process.env.PROD_CHECK ? '(production server url here)' : process.env.API_URL,
    }
  },

As I said, before I put that key back in, my proxies were failing. Once I put it back in, everything is back to normal.

I hope this helps, or at least gives you some idea of how to get moving.

[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/': '' },
    },
  },

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

[mnuxt]

Yes, exactly this was the problem... I figured it out later.

Environment variable API_URL can be used to override baseURL.

[sanjeet2009]

@juretopolak Have you tried the config with prefix

  proxy: {
    '/services/': 'https://xyz.com'
  },
  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
    '@nuxtjs/proxy'
  ],

  // Axios module configuration: https://go.nuxtjs.dev/config-axios
  axios: {
    proxy: true,
    prefix :'https://xyz.com/services'
  },

[N0N4M3BNS]

Someone can help me? I have this issues too. Have solution?

[JhouXu]

Someone can help me? I have this issues too. Have solution?

hi,Have you solved this problem？

[farizrachmansyah]

Hi everyone, I've tried to modify my API_URL env name as mentioned by @pjnicolas, @mnuxt, and in @juretopolak demo project. But that solution doesn't work for me. I really need help to solve this issue. It would be much appreciated if anyone could help. Thank you

cc @pi0

[juretopolak]

@farizrachmansyah my problem was that I used the same variable name for API backend that '@nuxtjs/axios' is using for overriding baseURL. After selecting a different var name the problem was gone.

What is the value of baseURL in the log? It should be on the same domain as the project is running on.

API_URL="https://fakerapi.it/api/v1/"
[log] baseURL: 'https://fakerapi.it/api/v1/'

With this var name, I changed baseURL value which was causing the problem.

FAKER_API_URL="https://fakerapi.it/api/v1/"
[log] baseURL: 'http://localhost:3000/'

The value of baseURL is the domain on which is running the Nuxt app (that is the whole point of proxy).

If you still can't solve your problem prepare a demo example on Github as I did so we will be able to run it locally. Otherwise, it will be hard to help.