Конфигурация перехватчика Axios - URL не совпадает

Question

Я работаю в vue.js и использую axios для отправки запросов на сервер.Я настроил перехватчик для добавления токенов авторизации в запросы.Функция, которая генерирует токен, требует полного URL с протоколом для создания правильного токена.Я создал свой экземпляр Axios http.Если я использую полный URL-адрес в вызове http: http.get('http://ediscore.net/api/config/category', он работает хорошоНо если я устанавливаю базовый URL на уровне axios: const http = axios.create({baseURL: 'http://ediscore.net/api',, а в вызове axios я использую только http.get('config/category'), у меня проблема.URL-адрес из свойства перехватчика не является полным.

---

Мой перехватчик:

http.interceptors.request.use(
  (config: AxiosRequestConfig) => {
    console.log('Axios interceptor => config: ', config);
    console.log('Axios interceptor => config.url: ', config.url);
    const token: string = authService.getHmacToken(config.url, config.method);
    if (token) {
      config.headers.Authorization = `${token}`;
    }
    return config;
  },
  (error: AxiosError) => Promise.reject(error)
);

---

console.log () конфигурации перехватчика:

Axios interceptor => config:  {adapter: ƒ, transformRequest: {…}, transformResponse: {…}, timeout: 20000, xsrfCookieName: "XSRF-TOKEN", …}
adapter: ƒ xhrAdapter(config)
baseURL: "http://ediscore.net/api"
data: undefined
headers: {Accept: "application/json", Authorization: ""...
maxContentLength: -1
method: "get"
timeout: 20000
transformRequest: {0: ƒ}
transformResponse: {0: ƒ}
url: "http://ediscore.net/api/config/category"
validateStatus: ƒ validateStatus(status)
xsrfCookieName: "XSRF-TOKEN"
xsrfHeaderName: "X-XSRF-TOKEN"
__proto__: Object

---

console.log () свойства config.url перехватчика:

Axios interceptor => config.url:  config/category

---

Как это возможно, что во всем объекте конфигурации я вижу свойство url: http://ediscore.net/api/config/category (завершено, включая протокол - см. строку 11) но если я перечислю только URL-адрес его свойства, я получу только config/category?(Это значение, которое я посылаю генератору токенов, и поэтому оно не работает, потому что в нем отсутствует часть baseURL).

Это не имеет смысла для меня.Пожалуйста, помогите, потому что я не понимаю.

Answer 1

Вы должны создать экземпляр axios и затем использовать этот экземпляр для взаимодействия с API.

Например, создать request.js

import axios from 'axios'

const request = axios.create({
  baseURL: 'https://your_api',
})

request.interceptors.request.use(
  request => {
    const token = localStorage.getItem('token')
    if (token) {
      request.headers.Authorization = token
    }
    return request
  },
  error => {
    return Promise.reject(error)
  }
)

export default request

Затем в ваших компонентах:

import request from './request.js'

export default {
  created() {
    request.get('/api_route')
      .then()
      .catch()
      .finally()
  }
}

Надеюсь, это поможет.