如何在 Axios 实例中创建动态 baseURL

Question

My application is running in iframe and it gets a payload with baseURL during loading. I want to use that url to create Axios instance.

Is there a way to do that?

I mean:

const instance = axios.create({
  baseURL: 'https://some-domain.com/api/', // should be dynamic
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

Answer 1

Try this way.

//config.js
    var config = {
        localConfig: {
            baseurl: 'http://localhost:8080/'
        },
        devConfig: {
            //dev url
            baseurl: 'http://dev.url:8080/'
        },
        prodConfig: {
            //prod url
            baseurl: 'http://production.url:8080/'
        }
    },
    
    getConfig: function(){
     switch(window.location.hostname) {
          case 'localhost:8080/':
            return this.localConfig;
          case 'development':
            return this.devConfig;
           case 'production':
            return this.prodConfig;
        }
      }
    }

export default config;


//service.js
const instance = axios.create({
  baseURL: config.getConfig().baseurl, // should be dynamic
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});