已配置BaseURL的AxiosInstance提交请求体失败，如何解决？

核心问题 #

你遇到的500错误，根源是使用GET请求携带请求体。HTTP规范中GET请求通常不设计用来传递请求体，多数后端服务（尤其是gRPC转HTTP的服务）会直接拒绝这类请求，导致服务器内部错误。

解决方案 #

根据后端接口的要求，二选一即可：

方案1：改用支持请求体的HTTP方法（推荐）

如果后端接口允许用POST/PUT等方法，直接替换get为post，并将请求体作为第二个参数传入（Axios中POST的第二个参数就是请求体，无需嵌套在data字段里）：

const grpcClient: AxiosInstance = axios.create({
    baseURL: url.baseUrl,
    headers: {
        'content-type': 'application/json',
    },
});

export const api = {
    async getTest() {
        try {
            const res = await grpcClient.post<BlogResponse>("/v1/get", { blogId: '2108' });
            console.log(res);
            return res.data;
        } catch (err) {
            console.log("error" + err);
        }
    },
}

方案2：GET请求用Query参数传递数据

如果后端强制要求用GET方法，把参数放到URL的Query参数中，而非请求体：

const grpcClient: AxiosInstance = axios.create({
    baseURL: url.baseUrl,
    headers: {
        'content-type': 'application/json',
    },
});

export const api = {
    async getTest() {
        try {
            const res = await grpcClient.get<BlogResponse>("/v1/get", {
                params: { blogId: '2108' }
            });
            console.log(res);
            return res.data;
        } catch (err) {
            console.log("error" + err);
        }
    },
}

额外修正 #

原代码中getTest方法存在重复定义的语法错误（内部又写了一遍async getTest()），已经在上述示例中移除，避免运行时报错。

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