axios 复制拦截器中的 url

Question

I am using Axios for my HTTP request and this is my first time I got this problem. the first request is passed and everything is good. but in my second request, I have a problem that Axios is duplicate my URL without reason.

the url that axios is trying to fetch at the end looks like this:

http://localhost:3001/http://localhost:3001/http://localhost:3001/user/5e4844f6451e0078e7dd398e

this is the fetch action:

export const getUserDetailsById = async ({id}) => {
    return await axios.get(`user/${id}`).then(res => res.data);
};

and the interceptor:

import axios from "axios";

export default () => {
    axios.interceptors.request.use(function (config) {
        const token = localStorage.getItem(process.env.REACT_APP_TOKEN_NAME);
        config.headers.common['authorization'] = `Bearer ${token}`;
        config.headers.common['Content-Type'] = 'application/json';
        config.url = `${process.env.REACT_APP_API_URL}/${config.url}`;

        const url = config.url;
        console.log(url);

        return config;
    },  function (error) {
        return Promise.reject(error);
    });

    axios.interceptors.response.use(function (response) {
        return response;
    }, function (error) {
        return Promise.reject(error);
    });
};

Answer 1

You can set baseURL when calling axios.create

import axios from 'axios';

var api = axios.create({
    baseURL: `${AppConfig.apiUrl}/services`,
});

export default api;

then import api when ever you want to use axios.