axios 复制拦截器中的 url

Question

我在 HTTP 请求中使用 Axios，这是我第一次遇到这个问题。 第一个请求通过，一切都很好。 但是在我的第二个请求中，我遇到了一个问题，即 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

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

import axios from 'axios';

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

export default api;

然后在您想使用 axios 时导入api 。