如何用JavaScript（含jQuery）检测并处理浏览器拦截URL的操作？

嘿，这个问题挺实用的！Chrome DevTools的请求拦截（比如Network面板里的Request blocking功能）并不会给前端暴露直接的事件通知，但我们可以通过监听请求的异常状态来间接判断是否被拦截，下面是几个可行的实现方式：

方案1：重写XMLHttpRequest监听异常 #

当请求被DevTools拦截时，原生XHR会触发abort或error事件，我们可以重写XHR的open方法来监听这些事件：

// 保存原生的XHR open方法
const originalXHROpen = XMLHttpRequest.prototype.open;

XMLHttpRequest.prototype.open = function(method, url) {
  // 监听abort事件（拦截请求通常会触发这个）
  this.addEventListener('abort', () => {
    // 匹配你要检测的目标URL
    if (url.includes('/your-target-api-path')) {
      alert('This URL is blocked by chrome dev tools');
    }
  });

  // 同时监听error事件，覆盖其他可能的异常场景
  this.addEventListener('error', () => {
    if (url.includes('/your-target-api-path')) {
      alert('This URL is blocked by chrome dev tools');
    }
  });

  // 调用原生方法
  originalXHROpen.apply(this, arguments);
};

方案2：重写Fetch API捕获拒绝状态 #

如果你用的是现代的fetch API，拦截的请求会返回一个rejected promise，我们可以包装fetch来捕获这个情况：

// 保存原生fetch方法
const originalFetch = window.fetch;

window.fetch = function(resource, options) {
  // 先获取请求的URL
  const requestUrl = typeof resource === 'string' ? resource : resource.url;

  return originalFetch(resource, options)
    .catch(error => {
      // 拦截通常会抛出AbortError或"Failed to fetch"错误
      if (requestUrl.includes('/your-target-api-path') && 
          (error.name === 'AbortError' || error.message.includes('Failed to fetch'))) {
        alert('This URL is blocked by chrome dev tools');
      }
      // 不要吞掉错误，让原业务逻辑继续处理
      throw error;
    });
};

注意事项 #

• 这些异常（abort/error）也可能来自其他场景（比如网络断开、服务器错误），如果需要更精准的判断，可以结合：
  • 记录该URL之前的成功请求状态，对比异常时的网络状态（比如用navigator.onLine判断是否在线）
  • 设置合理的超时时间，超时后再判断是否属于拦截情况
• DevTools的拦截是浏览器层面的操作，前端无法拿到“被DevTools拦截”的官方标识，只能通过异常行为间接推断

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