动态更改axios代理URL的正确方式？

Question

我在我的主Vue文件中有以下代码：

export default axios.create({
  baseURL: 'http://127.0.0.1',
  proxy: {
    '/api/': 'http://127.0.0.1',
    '/w0w/': 'http://192.168.1.12'
  }
})
Vue.prototype.$axios = axios;

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

在运行时更改发往/w0w/的代理请求的目标URL的最佳实践是什么？

也就是说，让用户通过UI修改这些地址。

Answer 1

您可以将导出更改为接受URL并在需要更新它时调用它的方法

const createAxios = (proxyURL) => {
 axios.create({
  baseURL: 'http://127.0.0.1',
  proxy: {
    '/api/': 'http://127.0.0.1',
    '/w0w/': proxyURL || 'http://192.168.1.12'
  }
 })
}

export default createAxios

现在你需要用不同的方式来称呼它

Vue.prototype.$axios = axios(/*or custom proxy url here*/);