更改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()..

现在以上内容是有效的，但我想更改baseURL而不影响全局基础URL，这样在我的组件中我可以简单地使用它而不需要API端点所以我已经尝试过了。

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

我如何处理这个问题？

- Geoff

---

您可以通过设置以下代码更改axios实例的基本URL：this.$axios.defaults.baseURL = "https://localhost:8000"。 - Majid

为了其他访问者，临时更改baseURL，您可以将绝对URL传递给所需的方法： this.$axios.get('http://127.0.0.1:8000/items') - Majid

axios.get('/items', { baseUrl: 'https://another-endpoint' }) 或另一个例子 axios.post('/items', payload, { baseUrl: 'https://another-endpoint' }) 是另一种选择。请参见 https://github.com/axios/axios#config-order-of-precedence 了解配置的优先顺序。 - user115014

那么，使用基础URL创建一个实例的用途是什么呢？axios.create(axiosConfig) - Naren

@Naren 对此没有一个固定的答案。就我个人而言，我正在从 v1 API 迁移到 v2 API。我可以将 baseURL 设置为 /api/v2，然后在每个方法中添加覆盖，指向 /api/v1。随着我在端点中逐步构建 v2 的替代方案，我可以逐一删除这些覆盖，直到全部迁移到 v2。 - undefined

Answer 1

我想在这里提出我的意见。我想做同样的事情，但不想硬编码特定请求的URL。所以我想出了这个解决方案。

为了将'api'附加到我的基本URL中，我将默认的基本URL设置为：

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

然后在我的具体请求中，明确设置了方法和URL之后，我将baseURL设置为'/'

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

- Shahbaz A.

---

那么，如果您在方法中不设置baseUrl，使用相对路径的话会出现问题吗？如果我键入显式URL，例如http://server01.domain.com，则可以使baseUrl起作用，但我必须在多个独立的服务器上设置应用程序。 - Jack

@Jack，我也遇到了和你一样的情况，你找到了优雅的解决方法吗？ - Matias Salimbene

@MatiasSalimbene 我将全局变量设置为“/MyApp/api”，但没有在方法中进行设置。然后将路由器设置为“/MyApp”。 - Jack

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

- Vipin Kumar

---

为了临时更改基础URL，您可以将绝对URL传递给所需的方法：this.$axios.get('http://new-url.com/items')。无需将所有参数作为对象传递给this.$axios。 - Majid

虽然这会更改baseURL，但对于所有构建模式来说是相同的。+ 它仅更改此单个特定axios请求的baseUrl。如何正确地以VUE方式完成，请查看我的答案。 - Andris

Answer 3

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' })

- Andris

Answer 4

如果还有其他人需要帮助：

您可以直接更改Axios的基本URL，以便在需要使用它的地方进行使用。

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

它会更改基础URL

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

- Carlos Feliz

---

这将更改所有即将到来的请求的配置。你最好将它作为仅针对此请求的配置传递：axios({ url:'/cats', baseURL: 'http://wwww.example.com' }) - Titenis

Answer 5

根据axios文档，你需要使用baseURL和url。

在发起请求时，将会在url前添加baseURL。因此，您可以将baseURL定义为http://127.0.0.1:8000，并将您的请求发送至/url。

 // `url` is the server URL that will be used for the request
 url: '/user',

 // `baseURL` will be prepended to `url` unless `url` is absolute.
 // It can be convenient to set `baseURL` for an instance of axios to pass relative URLs
 // to methods of that instance.
 baseURL: 'https://some-domain.com/api/',

- Jonathan Batista

---

我已经阅读了那些 Axios 文档，但奇怪的是我的 baseURL 从来没有被预置。如果我假装 baseURL 功能不存在并适当更改我的 url，一切都正常运作。 - Ryan

Answer 6

你也可以使用这个（适用于Nuxt和Vue）

this.$axios.defaults.baseURL = 'http://example.com/example'

这对我来说很有用，可以为一个请求设置自定义的 baseURL。

async getDataFromServer({ commit }, payload) {
    commit('setLoadingStatus', true)
    try {
      const page = payload.page || 1
      const sort = payload.sort || 'published_at'

      this.$axios.defaults.baseURL = 'http://example.com/example'
     
      const { data } = await this.$axios.get(`/example`)

      commit('setItOnState', data)
    } catch (e) {
      throw new Error(e)
    } finally {
      commit('setLoadingStatus', false)
    }
  },

- mohamadreza javady

---

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心中找到有关如何编写良好答案的更多信息。 - Community