javascript - axios在拦截器中重复url

Question

我正在使用 Axios 进行 HTTP 请求，这是我第一次遇到此问题。 第一个请求通过了，一切都很好。但在我的第二个请求中，我遇到了一个问题，Axios 无缘无故地重复了我的 URL。

axios 最后尝试获取的 url 如下所示:

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

这是获取操作:

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

和拦截器:

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

您可以在调用axios.create时设置baseURL

import axios from 'axios';

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

export default api;

然后当你想使用 axios 时导入 api 。