Vue.js Axios拦截器配置-URL不相同

我在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部分）

---

这对我来说毫无意义。请帮助我，因为我不明白。

您必须创建一个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()
  }
}

---

希望有帮助。

是的，我就是这么做的。“http”正是我设置拦截器的axios实例。但它没有回答我关于拦截器配置URL的问题，是吗？我认为它解决了问题。对于api调用，您不必使用axios.get（）而使用instance.get（）。如果您尝试我的simplify示例，它将起作用。因此，在您的组件中，不要使用axios与API交互，而是使用axios实例，您必须导入它。我发布的示例是我在应用程序中使用它的方式，它正在工作。我明白了。对不起，我没有准确编写它。我使用http.get（http是我的axios实例），而不是全局axios对象。我将对问题进行编辑以澄清。显示不同数据的“console.log”原因是浏览器（chrome）在Console选项卡中展开对象时，及时计算对象的值。稍后在调用http.interceptors.request.use后的代码中更改拦截器配置的Url。这是有意义的，但您可以看到两个Console.log（）命令在没有任何其他操作的情况下相互跟踪。那么如何获取完整的URL？始终是config.baseUrl+'/'+config.URL？我已经回答过了。config.URL是字符串，所以它会按原样打印到控制台。但该对象未打印到控制台中，您首先会看到对该对象的折叠引用，当您将其解压时，它将在该时间从内存中加载，而不是在调用“console.log”时。在控制台中运行以下命令：[const object={key:“value”}；console.log（object）；object.key=“newvalue”；]为了测试的目的，解开这个物体，你就会明白我的意思