使用Axios实例调用Trello API报404错误，静态方法却正常

TrelloService类的实例方法getUserDetails调用后返回404错误，但静态方法getUserDetails2能正常工作，相关代码如下：

export class TrelloService {
    public instance: AxiosInstance;
    constructor(token: string) {
        this.instance = axios.create({
            baseURL: `https://api.trello.com/1?key=${process.env.TRELLO_API_KEY}&token=${token}`,
        });
    }

    public async getUserDetails(email: string): Promise<any> {
        const userDetails = await this.instance.get(`/members/${email}`);
        return userDetails;
    }
    
    public static async getUserDetails2(
        email: string,
        token: string,
        throwError = false,
    ): Promise<any> {
        let userDetails: any = null;

        const userDetails = await axios.get(`https://api.trello.com/1/members/${email}?key=${process.env.TRELLO_API_KEY}&token=${token}`)
        return userDetails;
    }
}

调用实例方法的代码：

const trelloService = new TrelloService(accessToken);
const temp = await trelloService.getUserDetails(email);

Axios拼接baseURL和请求路径时，若baseURL包含查询参数且请求路径以/开头，会替换baseURL的路径部分，而非追加。

你的baseURL为https://api.trello.com/1?key=xxx&token=xxx，调用get('/members/${email}')时，Axios会把baseURL的路径/1替换成/members/${email}，最终请求URL变为：
https://api.trello.com/members/${email}?key=xxx&token=xxx

而Trello API的正确路径需要包含/1，缺失该部分导致返回404。

推荐使用Axios的params配置传递查询参数，这是更规范且不易出错的方式：

export class TrelloService {
    public instance: AxiosInstance;
    constructor(token: string) {
        this.instance = axios.create({
            baseURL: 'https://api.trello.com/1',
            params: {
                key: process.env.TRELLO_API_KEY,
                token: token
            }
        });
    }

    public async getUserDetails(email: string): Promise<any> {
        const userDetails = await this.instance.get(`/members/${email}`);
        return userDetails;
    }
    
    public static async getUserDetails2(
        email: string,
        token: string,
        throwError = false,
    ): Promise<any> {
        const userDetails = await axios.get('https://api.trello.com/1/members/' + email, {
            params: {
                key: process.env.TRELLO_API_KEY,
                token: token
            }
        });
        return userDetails;
    }
}

可选替代方案 #

若坚持在baseURL中保留查询参数，需调整格式和路径：

• 让baseURL以/结尾：https://api.trello.com/1/?key=${process.env.TRELLO_API_KEY}&token=${token}
• 请求路径不要以/开头：get(members/${email})

这样Axios会正确拼接出https://api.trello.com/1/members/${email}?key=xxx&token=xxx。

• 静态方法统一使用params配置，避免重复拼接URL，提升可维护性
• 替换any类型，定义UserDetails接口约束返回值，增强类型安全性

内容的提问来源于stack exchange，提问作者Joy Gupta