Axios 拦截器配置 - URL 不一样

Posted 2023-02-22

【中文标题】Axios 拦截器配置 - URL 不一样

【英文标题】：Axios interceptor config - URL is not the same

【发布时间】：2019-07-08 22:48:25

【问题描述】：

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

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

【问题讨论】：

“console.log”显示不同数据的原因是，当您在“控制台”选项卡中展开对象时，浏览器 (chrome) 会及时评估对象的值。调用 http.interceptors.request.use 后，代码后面会更改拦截器的配置地址。

嗯，这是有道理的，但是您可以看到两个 console.log() 命令在没有任何其他操作的情况下相互跟踪。那我怎样才能得到完整的网址呢？总是 config.baseUrl + '/' + config.url?

我已经回答过了.. config.url 是字符串，所以它“按原样”打印到控制台。但是对象并没有打印到控制台，你首先会看到对对象的折叠引用，当你展开它时，它是在那个时候从内存中加载的，而不是在调用“console.log”的时候。在控制台中运行此命令： [ const object = key: "value" ;控制台.log（对象）； object.key = "新值"; ] 用于测试目的，展开对象，你会明白我的意思

【参考方案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()
  

希望对你有帮助。

【讨论】：

是的，我就是这样做的。 'http' 正是我为其设置拦截器的 axios 实例。但它并没有回答我关于拦截器配置 URL 的问题，是吗？

我认为它可以解决问题。对于 api 调用，您不必使用 axios.get() 而是 instance.get()。如果您尝试我的简化示例，它将起作用。

所以在你的组件中不要使用 axios 与 API 交互，而是使用 axios 实例，你必须导入它。我发布的示例是我如何在我的应用程序中使用它并且它正在工作。

我明白了。对不起，我写的不是很准确。我使用 http.get （并且 http 是我的 axios 实例），而不是全局 axios 对象。我将编辑问题以使其清楚。