Axios-module: SSR and CSR confusion

[CHEWX]

Hi,

Little confused with proxying requests.

Currently I cannot get both SSR and CSR working at the same time, but can get them working individually.

Request:
return $axios.get( '/pages/123' )

Config:
nuxt.config.js

axios: {
    proxy: true,
    proxyHeaders: false,
    baseURL: process.env.NODE_ENV === 'development' ? 'http://local-api.test/wp-json/wp/v2' : 'https://user:[email protected]/wp-json/wp/v2',
},
proxy: {
    '/data/': {
        target: process.env.NODE_ENV === 'development' ? 'http://local-api.test/wp-json/wp/v2' : 'https://user:[email protected]/wp-json/wp/v2',
        pathRewrite: {
            '^/data/': '/'
        }
    }
},

SSR will correctly fetch 123 route and render. However, if I go to another page and go back to this page and fetch via CSR, then it will request incorrectly to a page, not a endpoint.

However, if I change the request from return $axios.get( '/pages/123' ) to return $axios.get( '/data/pages/123' ), CSR will work correctly, but SSR will 404 Request failed with status code 404.

How can I get both CSR and SSR working?

Thanks,
Tom

_{This question is available on Nuxt community (#c257)}

[cmty[bot]]

This issue as been imported as question since it does not respect axios-module issue template. Only bug reports and feature requests stays open to reduce maintainers workload.
If your issue is not a question, please mention the repo admin or moderator to change its type and it will be re-opened automatically.
Your question is available at https://cmty.app/nuxt/axios-module/issues/c257.

[CHEWX]

For the purpose of GitHub, I've now got this working.

Simply dropped baseURL, this isn't needed and was confusing the setup.

A side note, it would be nice if the docs had more examples, it's very very minimal and has assumptions on that you understand what each option is.

[codeofsumit]

I'm so confused by this proxy thing. It doesn't work at all for me - can you share your nuxt.config and how you use it please? The config within nuxt.config doesn't seem to do anything for me when using this.$axios.get() in components

[CHEWX]

@codeofsumit Depends what you are trying to achieve, do you need to proxy? It's just re-writing the requests.

[codeofsumit]

I need a proxy to circumvent CORS problems. I'd like to use the mailchimp API for a subscriber form and I thought the proxy-module will route my request through nuxt' http server. Did I misunderstood that?

This is my current config:

modules: [
  '@nuxtjs/axios'
],
axios: {
  proxyHeaders: false,
  proxy: true
},

proxy: {
  '/mailchimp/': {
    target: 'https://us8.api.mailchimp.com',
    pathRewrite: { '^/mailchimp/': '' }
  }
},

[CHEWX]

Nope, that's understood correctly.

What does your request look like?

[codeofsumit]

I use it like this:

const test = await this.$axios.get('/mailchimp/3.0/lists/12334/members/')

But the request doesn't go to mailchimp, it goes to localhost:3000.

[codeofsumit]

oh sh*t no, you just made me realize it has been working all along. The proxying is hidden in the background. The errors I got were from the API (just as I wanted) but I did not realize this.
🎉 🎉 => it works!

Thanks so much for you quick answers 😅 I'm very happy again

[CHEWX]

Haha, no worries dude!