Enable axios to use current domain as host for client requests

What problem does this feature solve?

Since nuxt generate can’t be used together with nuxt.config.js axios: { proxy: true }, is there a way to configure axios to extract host for browser(client) requests from current browser page domain? If what I’m asking for doesn’t make sense please point me to the right direction on where to look for solution. I’m trying to setup a Docker config with nuxt generate which could be run from both local development machine and production without any adjustments and this proxy limitation really prevents me from reaching this without hardcoding stuff.

If described above makes any sense at all consider the following changes:

What does the proposed changes look like?

Perhaps we could use document.location.host to extract host while in the browser and append our port and prefix to it?

This would mean settings in nuxt.config.js like (inspired by proxy setting)

axios: { 
    reuseBrowserDomain: true
},
browserAxios: {
    port: 1337,
    prefix: '/api'
}

which take precedence over browserBaseURL in case they are set.

Another option would be to allow setting a function to browserBaseURL which is to be executed in browser context.

<div align="right">_{This feature request is available on Nuxt community (#c343)}</div>

[kkojot]

Thank you @kyrsquir for your quick response. Well, I use apache to host my frontend static files in production and I don’t have any proxy. I also develop in SPA mode.

If you have backend on the same port as frontend, you can simply set axios: { browserBaseURL: "/" } and it’s going to use current browser domain, but if you want to set the port also axios: { port: 8080, browserBaseURL: "/"} then it’s going to use localhost always and it seems to be a bug for me.

My workaround is to use a client-side plugin and set the base URL to axios.

nuxt.config.js

  plugins: [
    "~/plugins/axios.client.js"
  ]

axios.client.js in /plugins

export default function({ $axios }) {
  if (process.client) {
    const host = window.location.hostname;
    $axios.setBaseURL("http://" + host + ":8080");
  }
}

This covers all of my cases: developing locally, running docker on the local machine, running docker in production.

[farnabaz]

@vipulphysiofirst You should mock axios inside jest. checkout #105