更改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，以便在我的组件中我可以简单地使用而无需api端点，因此

我试过了

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

我该怎么办？

Answer 1

如果其他人仍然需要帮助：

您可以直接在您想要使用的地方更改 Axios 基本 URL

anotherAxiosRequest(){
 axios.defaults.baseURL = http://wwww.example.com
 axios({
   url:'/cats' //=>  http://wwww.example.com/cats
 })
}

它会改变基本 URL

请注意，这不会更改 main.js 中定义的基本 URL

Answer 2

代替

this.$axios.get('items')

使用

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

如果您不通过，method: 'XXX'则默认情况下，它将通过get方法发送。

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

Answer 3

把我的两分钱放在这里。我想做同样的事情而不用硬编码特定请求的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 4

1. 创建.env.development，.env.production文件（如果不存在）并在那里添加您的 API 端点，例如：VUE_APP_API_ENDPOINT ='http://localtest.me:8000'
2. 在 main.js 文件中，在导入后添加这一行： axios.defaults.baseURL = process.env.VUE_APP_API_ENDPOINT

就是这样。Axios 默认基本 URL 被替换为构建模式特定的 API 端点。如果您需要特定请求的特定 baseURL，请执行以下操作：

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