如何通过JavaScript拦截所有AJAX请求并添加自定义参数？

嘿，我刚好做过类似的需求——给所有AJAX请求自动追加服务端需要的额外参数，兼容原生XMLHttpRequest和jQuery这类封装库的场景，我帮你把代码补全并拆解细节，这样你就能直接复用啦～

完整可运行代码 #

// 先保存原生的XMLHttpRequest.send方法，避免重写后丢失原生功能
const originalSend = XMLHttpRequest.prototype.send;

XMLHttpRequest.prototype.send = function(data) {
    console.log('👉 拦截到新的AJAX请求');
    
    // 这里替换成你实际的动态参数生成逻辑
    // 示例：从全局状态、cookie或工具函数获取参数
    const getExtraParam = () => {
        return 'ABC123_' + Date.now(); // 带时间戳的动态值，模拟实际场景
    };
    const myExtraParam = getExtraParam();

    // 处理不同类型的请求
    if (this.method) {
        const method = this.method.toUpperCase();
        
        // 处理GET请求：直接在URL后拼接参数
        if (method === 'GET') {
            const separator = this.url.includes('?') ? '&' : '?';
            this.url += `${separator}extraParam=${encodeURIComponent(myExtraParam)}`;
        } 
        // 处理POST请求：根据请求体类型追加参数
        else if (method === 'POST' && data) {
            const contentType = this.getRequestHeader('Content-Type') || '';

            // 场景1：表单编码格式（application/x-www-form-urlencoded）
            if (contentType.includes('application/x-www-form-urlencoded') || 
                (typeof data === 'string' && data.indexOf('=') !== -1)) {
                data += `&extraParam=${encodeURIComponent(myExtraParam)}`;
            }
            // 场景2：JSON格式（application/json）
            else if (contentType.includes('application/json') || 
                     (typeof data === 'string' && data.startsWith('{'))) {
                try {
                    const jsonPayload = JSON.parse(data);
                    jsonPayload.extraParam = myExtraParam;
                    data = JSON.stringify(jsonPayload);
                    // 更新请求体长度，避免服务端解析异常
                    this.setRequestHeader('Content-Length', data.length.toString());
                } catch (err) {
                    console.warn('⚠️ 解析JSON请求体失败，跳过参数追加:', err);
                }
            }
            // 场景3：FormData文件上传/表单提交
            else if (data instanceof FormData) {
                data.append('extraParam', myExtraParam);
            }
        }
    }

    // 调用原生send方法，保证请求正常发送
    originalSend.call(this, data);
};

关键细节解释 #

• 保存原生方法：开头先把XMLHttpRequest.prototype.send存到originalSend里，最后用call调用原生逻辑，避免重写后破坏AJAX的原生功能。
• 动态参数生成：把参数逻辑封装在getExtraParam函数里，你可以直接替换成从后端接口、cookie或者全局状态获取参数的代码，灵活度很高。
• 兼容多种请求体：
  • GET请求直接拼接URL，自动处理已有参数的分隔符（?或&），不会搞乱URL格式。
  • POST请求覆盖了三种最常见的场景：表单编码、JSON、FormData，确保不管是原生还是jQuery发起的请求都能正常追加参数。
• 编码处理：用encodeURIComponent处理参数值，避免特殊字符（比如中文、&、=）导致的URL或请求体解析错误。

注意事项 #

1. 跨域请求：如果是跨域AJAX，这个参数属于普通键值对，不会触发OPTIONS预检请求，不用担心跨域问题。
2. 同步请求：现在同步AJAX基本没人用了，如果你的项目里有，可能需要额外调整逻辑，但大部分场景下不需要。
3. 异常容错：JSON解析失败时做了捕获，不会因为格式错误导致整个请求挂掉，保证业务可用性。

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