更改axios的默认基url

Question

我已经这样配置了我的axios

const axiosConfig = {
  baseURL: 'http://127.0.0.1:8000/api',
  timeout: 30000,
};

Vue.prototype.$axios = axios.create(axiosConfig)

在我的组件中，我作为

this.$axios.get('items').then()..

现在，上面的方法可以工作了，但是我想在不影响全局基本URL的情况下更改baseURL，这样在我的组件中，我就可以在没有APIendpoint的情况下简单地使用它

我已经试过了

this.$axios.baseURL = "http://127.0.0.1:8000";
this.$axios.get().. //this is still in api endpoint

我该怎么办？

Answer 1

1. 创建.env.development，.env.production文件，如果不存在，并添加APIendpoint，例如：VUE_APP_API_ENDPOINT='http://localtest.me:8000'
2. 在main.js文件中，在导入后添加一行：axios.defaults.baseURL=process.env.VUE_APP_API_ENDPOINT

就这样。Axios默认的基本Url替换为特定于生成模式的API终结点。如果您需要特定的基址为特定的请求，这样做：

this.$axios({ url: 'items', baseURL: 'http://new-url.com' })

Answer 2

把我的两分钱放在这里。我想做同样的没有硬编码的URL为我的特定请求。所以我想出了这个解决办法。

要将'api'附加到我的baseURL，我将默认的baseURL设置为，

axios.defaults.baseURL = '/api/';

然后在我的特定请求中，在显式设置方法和url之后，我将baseURL设置为'/'

axios({
    method:'post',
    url:'logout',
    baseURL: '/',
   })
   .then(response => {
      window.location.reload();
   })
   .catch(error => {
       console.log(error);
   });

Answer 3

而不是

this.$axios.get('items')

使用

this.$axios({ url: 'items', baseURL: 'http://new-url.com' })

如果您没有通过方法：“XXX”，那么默认情况下，它将通过get方法发送。

请求配置：https://github.com/axios/axios#request-配置