axios在拦截器中复制网址

时间:2020-02-19 10:42:16

标签: javascript reactjs axios

我正在使用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);
    });
};

1 个答案:

答案 0 :(得分:1)

您可以在致电baseURL时设置axios.create

import axios from 'axios';

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

export default api;

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