如何防止axios在baseURL后面加斜杠

Question

在我的 Vue 应用程序中，我将 axios 配置放入单独的文件 config.js。

config.js的内容

import axios from "axios";
const token = localStorage.getItem('user-token');
const baseUrl = `/api/v2.1/document.json&token=${token}&`;

export default () => {
    return axios.create({
        baseURL: baseUrl
    })
}

在我的 Vuex 商店模块 formFields.js 我有：

import Api from '../../api/config';

...

const actions = {
    async getApiFields() {
        await Api().get('type=documentType').then(function(response){
            console.log(response);
        }).catch(e => {
            this.errors.push(e)
        });
    }
};

那么，有什么问题吗？不知道axios为什么要加'/'

请求URL：... / API / V2.1 / document.json＆标记= eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiI3ZTE2OTk5My00YTJiLTRhYWMtOGNiNi00ZTY0NGY2NjE3NTkiLCJhdWQiOiJNYWVzdHJvTElWRSIsInN1YiI6Ik1hZXN0cm9MSVZFIEFQSSIsImV4cCI6MTU4MDIwMTQ5OSwiaWF0IjoxNTgwMTk3NzE5fQ.PWstAQCDr6Atd_J26futucIBOBUZiFCcp0g5Y1JTYUs＆/键入= documentType P>

Network tab screenshot here

如何防止添加这个斜线？

Answer 1

tl;dr 使用 axios 拦截器

组合默认和附加查询参数的问题

在axios.create 的配置对象中使用字段params，例如

import axios from "axios";
const token = localStorage.getItem('user-token');
const baseUrl = `/api/v2.1/`

/* Please note, an endpoint should not be part of the BaseURL */

export default () => {
  return axios.create({
    baseURL: baseUrl,
    params : { token : token }
  });
}

/* this will add ?token="XXX" query parameter to the url

import Api from '../../api/config';

/* /document.json is your endpoint, and should not be part of the baseUrl */

const actions = {
  async getApiFields() {
    await Api().get('/document.json').then((response) => {
      console.log(response);
    }).catch(e => {
      this.errors.push(e)
    });
  }
};

问题在于您不能添加额外的查询参数，因为它们会覆盖默认参数。所以要解决这个问题，你可以添加一个 axios 拦截器，它将令牌查询参数添加到每个请求中。

解决方法：使用axios拦截器

import axios from "axios";
const token = localStorage.getItem('user-token');
const baseUrl = `/api/v2.1/`

const instance = return axios.create({ baseURL: baseUrl });
instance.interceptors.request.use(config => {
  config.params = {
   // add your default ones
   token: token,
   // spread the request's params
    ...config.params,
  };
  return config;
});
export default instance; 

import Api from '../../api/config';

const actions = {
  async getApiFields() {
    await Api().get('/document.json', {params:{type:'documentType'}})
    .then((response) => {
      console.log(response);
    }).catch(e => {
      this.errors.push(e)
    });
  }
};

使用像这样的拦截器，会产生这样的请求（在这个例子中）：

/api/v2.1/document.json?token=XXX&type=documentType

您可以在此处阅读有关 拦截器 的更多信息：https://github.com/axios/axios#interceptors