如何防止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为什么要加'/'

Request URL: .../api/v2.1/document.json&token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiI3ZTE2OTk5My00YTJiLTRhYWMtOGNiNi00ZTY0NGY2NjE3NTkiLCJhdWQiOiJNYWVzdHJvTElWRSIsInN1YiI6Ik1hZXN0cm9MSVZFIEFQSSIsImV4cCI6MTU4MDIwMTQ5OSwiaWF0IjoxNTgwMTk3NzE5fQ.PWstAQCDr6Atd_J26futucIBOBUZiFCcp0g5Y1JTYUs&/type=documentType

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 拦截器，它将向每个请求添加 token 查询参数。

解决方案：使用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

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

How to prevent Axios from adding slash after baseURL

slash

prefix

base-url

vue.js

axios

合并默认和附加查询参数时出现问题

解决方案：使用axios拦截器