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')，则出现问题。拦截器属性的网址不完整。

我的拦截器：

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行）但是，如果仅列出其属性网址，那么我只会得到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()
  }
}

希望有帮助。

Axios拦截器配置-URL不同

1 个答案: