Axios GET请求参数键名中字符's'被移除的问题求助

问题现象 #

React项目中，所有携带params对象的Axios GET请求，参数键名中的's'会被移除（如sort_by变成ort_by、status变成tatu），但参数值中的's'不受影响。

相关代码片段 #

请求代码 #

const params = {
    sort_by: this.props.sort_by || "",
    order_by: this.props.order_by || "",
    vendor: this.props.vendor,
    status: JSON.stringify(this.props.status),
    per_page: this.state.per_page,
};
searchTerm && (params.search_term = searchTerm);

source_url &&
    (await axios
        .get(source_url, { params })
        .then(async (response) => {}))

Axios拦截器代码 #

axios.interceptors.request.use(async function (config) {
    NProgress.start();
    // @ts-ignore
    if (!!window.app_bridge_app) {
        // @ts-ignore
        return await getSessionToken(window.app_bridge_app) // requires an App Bridge instance
            .then((token) => {
                // append your request headers with an authenticated token
                config.headers["Authorization"] = `Bearer ${token}`;
                return config;
            });
    } else {
        config.headers["Authorization"] = ``;
        return config;
    }
});


axios.interceptors.response.use(
    function (response) {
        NProgress.done();
        !!response.data && !!response.data.success_message && toast.success(response.data.success_message);
        return response;
    }, function (error) {
        console.log('interceptor three error');
        NProgress.done();
        if (!!error.response.data.errors) {
            for (const [key, value] of Object.entries(error.response.data.errors)) {
                setTimeout(() => {
                    toast.error(value);
                }, (+key > 4 ? (+key * 200) : (+ key - 1)));
            }
        } else {
            toast.error(!!error.response.data.error_message ? error.response.data.error_message : error.response.statusText);
        }

        return Promise.reject(error);
    });

排查步骤 #

1. 检查全局参数处理逻辑

   • 确认项目中是否存在其他Axios请求拦截器、或者自定义的paramsSerializer配置。Axios默认使用qs库序列化参数，如果替换了自定义的序列化函数，可能存在逻辑错误导致键名被修改。
   • 排查是否有第三方库（如某些请求中间件、全局工具函数）在暗中修改params对象的键名。

2. 调试参数的生命周期

   • 在请求发送前、拦截器处理前后分别打印params，确认键名何时被修改：

     // 请求发送前打印
     console.log('Before axios call:', params);
     // 在拦截器中添加日志
     axios.interceptors.request.use(async function (config) {
         console.log('Interceptor received params:', config.params);
         // ...原有逻辑
         return config;
     });
     

   • 如果打印的原始params键名正常，但拦截器接收后异常，说明问题出在拦截器之前的代码；如果拦截器中正常但最终请求异常，问题出在Axios的序列化阶段。

3. 绕过Axios自动序列化测试

   • 手动将params序列化为查询字符串，直接拼接到URL上发送请求，观察参数是否正常：

     import qs from 'qs';
     const queryStr = qs.stringify(params);
     await axios.get(`${source_url}?${queryStr}`).then(res => {
         // 处理响应
     });
     

   • 如果手动拼接后参数正常，说明是Axios的自动序列化环节出问题；如果依然异常，说明params在生成后就被其他代码修改了。

4. 排查全局原型/函数污染

   • 检查项目中是否存在重写Object.keys、String.prototype.replace等全局方法的代码，这类修改可能导致遍历或处理参数键名时误删了's'。

5. 升级依赖版本

   • 检查Axios和qs（如果用到）的版本，某些旧版本可能存在已知的参数序列化bug。尝试升级到最新稳定版后再测试。

可能的根源 #

最常见的原因是全局代码污染了字符串处理逻辑，或者自定义的参数序列化函数存在错误，极少数情况是Axios/qs的旧版本bug。

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