Axios-module: Loading url in SSR fails, while all works on client side

[husayt]

This is the continuation of discussion we started in #74.
Since then I have upgraded to latest version and applied suggested configuration and it still fails.

I created a mapping "http://localhost:3000/data" =>"http://datasrvr:8888/data/items". Logs are as following:
[HPM] Proxy created: /data -> http://datasrvr:8888
[HPM] Proxy rewrite rule created: "^/data" ~> ""

Calling url "http://localhost:3000/data/items" directly works also works when I am using that url in client side mode. So I have the page "http://localhost:3000/workitems" where I call the above url with axios:

let { data } = await app.$axios.get("/data/items");

That page in client side works, but when I try in SS it fails with 404.

In the logs console i see the following in the long error message:

   baseURL: 'http://localhost:3000/',
   method: 'get',
   url: 'http://localhost:3000/data/items',

It should be something to do with configuration, as even in client mode "http://localhost:3000/workitems" calls "http://localhost:3000/data" which then calls "http://datasrvr:8888/data/items" from nuxt server. So essentially both are same server side calls, one works, and one doesn't. I am accessing that server through blue coat proxy, that might be also adding to the problem

_{This question is available on Nuxt.js community (#c73)}

[ashleywm]

Same issue here, client side is successfully proxied. SSR fails and is not proxied and remains the same as baseURL.

[pi0]

Thanks for the report. Basically, when adding a proxy, http://localhost:3000/data/items will be handled using the proxy middleware instead of nuxt middleware. So if it works, it should work on both sides. One possible reason for this is probably the API server (datasrvr:8888) which needs special headers.

Do you have any public version of API server for debugging?

[husayt]

Unfortunately, I don't have public api for server.

So if it works, it should work on both sides.

But still how come only one side works? Is there any config i can apply to fine tune headers or etc on server-side mode?

[pi0]

The only possible reason would be proxyHeaders which is enabled by default. You can try disabling that option will resolve the problem or not.

[husayt]

I finally got it working by fiddling with http_proxy environment variable. But still I don't understand why one was working and the other not.

Another, problem is that in SSR mode it's not making direct request to dataserver, but calling localhost first. It's calling http://localhost:3000/data/items. That adds an extra hop. I would expect in server-side mode it would translate that url to end url before making the request and call http://datasrvr:8888/data/items directly

[pi0]

What's your latest working nuxt.config.js?

[husayt]

  modules: [    '@nuxtjs/axios'  ],
  axios: {
    debug: true,
    proxy: true
  },
  proxy: {
    "/data": { 
                    target: "http://datasrvr:8888", 
                    pathRewrite: { '^/data': '' },
                    changeOrigin: false,
                    prependPath: false }
             },...

[pi0]

Another, problem is that in SSR mode it's not making a direct request to the data server, but calling localhost first. It's calling http://localhost:3000/data/items. That adds an extra hop

With the latest release, if you explicitly set environment variable API_URL on the production server, it will be used instead of the one at build time, so there is no extra proxy hope. (ea4882a52f72da4b3af00b70cd4d50e4eea52a46)

Please reopen the issue if still having problems. And thanks for your helps on reporting problems :)

[bhaidar]

@pi0 Hi,

I'm using Nuxt JS with Laravel Sanctum to access APIs.

Inside "fetch()" I call a store action. The store action uses "this.$axios.get('...')" to retrieve some data from the backend app.

For some reason, with SSR, axios proxy is ignored. On the other hand, the proxy kicks in when axios is used inside pages to handle client events (forms, etc.).

Is there any special config to use to make proxy also work on SSR when running the fetch() method?

Thanks

[juretopolak]

@bhaidar I'm having exactly the same problem. Looks like that proxy doesn't play well together with SSR since it works perfectly on the client. This is the first time that I'm dealing with an app in the universal mode so any advice would be much appreciated. I just can't find a solution to this...

[pi0]

Hi dear @juretopolak would you please also share nuxt.config (and also using a new issue would make it easier to track)

[juretopolak]

Hi @pi0, I have created new issue https://github.com/nuxt-community/axios-module/issues/464