Nuxt Axios Dynamic url

user_9751956 0
Viewed 3759

I manage to learn nuxt by using following tutorial

https://scotch.io/tutorials/implementing-authentication-in-nuxtjs-app

In the tutorial, it show that

axios: {
  baseURL: 'http://127.0.0.1:3000/api'
},

it is point to localhost, it is not a problem for my development,

but when come to deployment, how do I change the URL based on the browser URL,

if the system use in LAN, it will be 192.168.8.1:3000/api

if the system use at outside, it will be example.com:3000/api

On the other hand, Currently i using adonuxt (adonis + nuxt), both listen on same port (3000).

In future, I might separate it to server(3333) and client(3000)

Therefore the api links will be 

localhost:3333/api

192.168.8.1:3333/api

example.com:3333/api

How do I achieve dynamic api url based on browser and switch port?

axios nuxt.js proxy
3 Answers

You don't need baseURL in nuxt.config.js.

Create a plugins/axios.js file first (Look here) and write like this.

export default function({ $axios }) {
  if (process.client) {
    const protocol = window.location.protocol
    const hostname = window.location.hostname
    const port = 8000
    const url = `${protocol}//${hostname}:${port}`
    $axios.defaults.baseURL = url
  }
user_54434400

A late contribution, but this question and answers were helpful for getting to this more concise approach. I've tested it for localhost and deploying to a branch url at Netlify. Tested only with Windows Chrome.

In client mode, windows.location.origin contains what we need for the baseURL.

# /plugins/axios-host.js
export default function ({$axios}) {
  if (process.client) {
    $axios.defaults.baseURL = window.location.origin
  }
}

Add the plugin to nuxt.config.js.

# /nuxt.config.js
...
  plugins: [
     ...,
    "~/plugins/axios-host.js",
  ],
...
user_101186310

This question is a year and a half old now, but I wanted to answer the second part for anyone that would find it helpful, which is doing it on the server-side.

I stored a reference to the server URL that I wanted to call as a Cookie so that the server can determine which URL to use as well. I use cookie-universal-nuxt and just do something simple like $cookies.set('api-server', 'some-server') and then pull the cookie value with $cookies.get('api-server') .. map that cookie value to a URL then you can do something like this using an Axios interceptor:

// plguins/axios.js
const axiosPlugin = ({ store, app: { $axios, $cookies } }) => {
  $axios.onRequest ((config) => {
    const server = $cookies.get('api-server')

    if (server && server === 'some-server') {
      config.baseURL = 'https://some-server.com'
    }

    return config
  })
}

Of course you could also store the URL in the cookie itself, but it's probably best to have a whitelist of allowed URLs.

Don't forget to enable the plugin as well.

// nuxt.config.js
plugins: [
  '~/plugins/axios',

This covers both the client-side and server-side since the cookie is "universal"

user_31640710
Related