[FIXED] How to prevent Axios from adding slash after baseURL

Issue

In my Vue app I took the axios configuration to a seperate file config.js.

Content of 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
    })
}

In my Vuex store module formFields.js I have:

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)
        });
    }
};

So, what is wrong? I don't know why axios adds ' / '

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

Network tab screenshot here

How to prevent adding this slash?

Solution

tl;dr use axios interceptors

Problem with combining default and additional query params

Use field params in the config object for axios.create , like

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)
    });
  }
};

The Problem with that is you can't add additional query parameters, because they will override the default ones. So to have a solution for this, you could add a axios interceptor, which will add the token query parameter to each request.

Solution: Use axios interceptor

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)
    });
  }
};

Using an interceptor like this, will produce a request ( in this example ) like this:

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

You can read more about Interceptors here : https://github.com/axios/axios#interceptors

Answered By - Pascal Lamers

Answer Checked By - Terry (PHPFixing Volunteer)