Axios 拦截器配置 - URL 不一样

Question

我在 vue.js 工作，我正在使用 axios 向服务器发出请求。我已经配置了一个拦截器来向请求添加授权令牌。生成令牌的函数需要带有协议的完整 url 来创建正确的令牌。我已经创建了我的 axios 实例 http。 如果我在 http 调用中使用完整的 url：http.get('http://ediscore.net/api/config/category' 它运行良好。但是，如果我在 axios 级别设置基本 URL：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

---

拦截器的config.url属性的console.log()：

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

希望对你有帮助。