如何禁用AJAX POST请求在连接中断时的重试行为？

针对你遇到的POST请求因网络差+长耗时导致浏览器重复重试、数据库出现重复数据的问题，我整理了几个层面的解决方案，从核心保障到前端、服务器优化都覆盖到了：

一、后端实现幂等性（最核心的防线） #

不管前端怎么防重，后端必须确保重复请求不会产生副作用——这是解决这类问题的根本。推荐两种实现方式：

• 全局唯一请求ID：前端在发起请求前生成一个UUID（比如用uuid库），放在自定义请求头（比如X-Request-ID）里。后端接收到请求后，先检查这个ID是否已经处理过（可以存在Redis或者临时数据库表中，设置过期时间30秒，覆盖你的请求最长耗时20秒）。如果已处理过，直接返回之前的响应结果；没处理过再执行业务逻辑，处理完后记录这个ID。
• 业务唯一标识：如果请求本身带有业务层面的唯一键（比如「用户ID+操作类型+目标资源ID」），也可以用这个组合作为幂等键，避免重复执行。

这里给个PHP的简单实现示例，用Redis来跟踪已处理的请求ID：

$requestId = $_SERVER['HTTP_X_REQUEST_ID'] ?? null;
if (!$requestId) {
    http_response_code(400);
    echo json_encode(['error' => 'Missing request ID']);
    exit;
}

// 初始化Redis连接（根据你的实际配置调整）
$redis = new Redis();
$redis->connect('127.0.0.1', 6379);

// 检查请求ID是否已处理
if ($redis->exists($requestId)) {
    // 返回之前缓存的响应（也可以直接查数据库返回结果）
    echo $redis->get($requestId);
    exit;
}

// 执行业务逻辑
$responseData = handleYourBusinessLogic();

// 缓存请求ID和响应，设置30秒过期
$redis->setex($requestId, 30, json_encode($responseData));
echo json_encode($responseData);

二、前端层面阻止重复提交 #

针对你的两个前端框架，分别做针对性处理：

AngularJS（$http） #

• 最直观的：发送请求时禁用提交按钮，直到请求完成（成功/失败）再恢复。
• 进阶方案：用HTTP拦截器跟踪正在处理的请求ID，遇到相同ID的请求直接取消：

app.factory('duplicateRequestInterceptor', function($q) {
    const pendingRequests = {};
    return {
        request: function(config) {
            const requestId = config.headers['X-Request-ID'];
            if (pendingRequests[requestId]) {
                return $q.reject('Duplicate request detected');
            }
            pendingRequests[requestId] = true;
            return config;
        },
        response: function(response) {
            const requestId = response.config.headers['X-Request-ID'];
            delete pendingRequests[requestId];
            return response;
        },
        responseError: function(rejection) {
            const requestId = rejection.config?.headers['X-Request-ID'];
            if (requestId) {
                delete pendingRequests[requestId];
            }
            return $q.reject(rejection);
        }
    };
});
app.config(function($httpProvider) {
    $httpProvider.interceptors.push('duplicateRequestInterceptor');
});

React（whatwg-fetch） #

• 用状态管理（比如useState或useRef）跟踪请求状态，发起请求时设置isLoading为true，阻止用户重复点击提交按钮。
• 封装fetch函数，跟踪pending的请求ID，遇到重复请求直接抛出错误：

const pendingRequests = new Set();

const fetchWithIdempotency = async (url, options = {}) => {
    // 生成或使用传入的请求ID
    const requestId = options.headers?.['X-Request-ID'] || crypto.randomUUID();
    options.headers = { ...options.headers, 'X-Request-ID': requestId };

    if (pendingRequests.has(requestId)) {
        throw new Error('Duplicate request, please wait');
    }
    pendingRequests.add(requestId);

    try {
        const response = await fetch(url, options);
        return await response.json();
    } catch (err) {
        throw err;
    } finally {
        pendingRequests.delete(requestId);
    }
};

• 另外，不要依赖浏览器的自动重试：用AbortController设置自定义超时（比如25秒，比请求最长耗时多5秒），超时后主动终止请求，避免浏览器自动重试：

const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 25000);

try {
    const response = await fetch('/your-endpoint', {
        method: 'POST',
        signal: controller.signal,
        body: JSON.stringify(yourData),
        headers: { 'Content-Type': 'application/json' }
    });
    clearTimeout(timeoutId);
    // 处理响应
} catch (err) {
    if (err.name === 'AbortError') {
        alert('请求超时，请检查网络后重试');
    } else {
        // 处理其他错误
    }
}

三、Apache服务器配置优化 #

从你的日志看%O = 0说明响应发送前连接已中止，调整Apache的超时设置，避免过早断开连接：

• 修改httpd.conf或apache2.conf：

# 把连接超时设置为30秒，覆盖你的请求最长耗时20秒
Timeout 30
# 保持连接超时也调整为30秒
KeepAliveTimeout 30

• 另外，启用mod_deflate压缩响应内容，减少传输数据量，降低连接中断的概率。

四、升级到HTTPS #

HTTP协议下，浏览器的重试逻辑更宽松，而且中间网络节点（比如透明代理）可能会误处理请求。升级到HTTPS后，不仅安全性提升，现代浏览器对HTTPS请求的重试策略更严谨，能减少不必要的重复提交。这是长期的优化方向。

五、排查浏览器重试逻辑 #

针对Chrome的Stalled和ERR_CONNECTION_CLOSED：

• 从chrome://net-internals/的URL_REQUEST日志里，仔细查看连接中断的具体原因（是客户端超时、服务器主动断开还是网络节点问题），能帮你定位更底层的问题。
• 测试时可以用网络限速工具（Chrome DevTools的Network面板里的Throttling）模拟差网络，复现问题后排查。

总结一下：后端幂等性是必须的核心保障，前端防重和服务器配置是辅助手段，升级HTTPS能从协议层面减少问题发生的概率。

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