Firefox中调试XHR onerror：浏览器扩展请求EC2服务器失败排查

我正在开发一款浏览器扩展，需要向部署在EC2实例上的远程服务器发起HTTP请求，但运行代码时持续失败并触发onerror()事件。求排查错误原因的方法，或者如何阻止错误触发，感谢帮助。

内容脚本（Content Script） #

function getAddressBarURL() {
    url = window.location.href;

    console.log('Captured URL');
    return url;
}

const isValidUrl = urlString=> {
    var urlPattern = new RegExp('^(https?:\\/\\/)?'+ // 验证协议
  '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|'+ // 验证域名
  '((\\d{1,3}\\.){3}\\d{1,3}))'+ // 验证IP(v4)地址
  '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*'+ // 验证端口和路径
  '(\\?[;&a-z\\d%_.~+=-]*)?'+ // 验证查询字符串
  '(\\#[-a-z\\d_]*)?$','i'); // 验证片段定位符
return !!urlPattern.test(urlString);
}

const request_url = getAddressBarURL();


if(isValidUrl(request_url)) {
    console.log('Sending Message to Background Script');
    browser.runtime.sendMessage({'url': request_url});
}

后台脚本（Background Script） #

console.log("Extension Loaded");

function verifyURL(message) {
    console.log("Message From Content Script Recieved");
    console.log(message);

    const server_url = "ec2-44-204-184-249.compute-1.amazonaws.com:8080/predict";
    console.log("Create XHR object");
    let xhr = new XMLHttpRequest();
    
    xhr.open("POST", server_url);

    xhr.onreadystatechange = () => { // 状态变化时触发
        if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
          console.log(xhr.response);
        } else {
            return('Maybe Error');
        }
    }

    xhr.onerror = function (err) {
        console.log("** 请求发生错误");
        console.log(err);
        console.log(err.target.status);
        console.log(xhr.readyState);
    };

    console.log("Send Request")
    xhr.send(message.url);

}


browser.runtime.onMessage.addListener(verifyURL);

控制台日志 #

更新后的MANIFEST.JSON #

{

  "description": "URL Classifier determines whether the URL the user is about to access is malicious or not",
  "manifest_version": 2,
  "name": "URL Classifier",
  "version": "1.0",
  "homepage_url": "",
  "icons": {
    "48": "icons/shield-ok-icon.png"
  },

  "permissions": [
    "activeTab",
    "webRequest",
    "<all_urls>"
  ],

  "background": {
    "scripts": ["background-script.js"]
  },

  "content_scripts": [
    {
      "matches": [ "<all_urls>"],
      "js": ["content_scripts/content.js"]
    }
  ],

  "browser_action": {
    "default_icon": "icons/shield-ok-icon.png",
    "default_title": "URL Classifier",
    "default_popup": "popup/view_statistics.html"
  }

}

错误排查步骤 #

• 修复请求URL格式：后台脚本里的server_url缺少HTTP/HTTPS协议头，浏览器会把它解析成当前页面的相对路径，直接导致请求失败。必须改成带协议的完整URL：

  const server_url = "http://ec2-44-204-184-249.compute-1.amazonaws.com:8080/predict";
  

  如果服务器配置了HTTPS，就用https://。
• 确认EC2服务器可访问：
  1. 直接在浏览器地址栏访问上面的完整URL，看是否能得到正常响应。
  2. 检查EC2实例的安全组规则，确保8080端口允许外部访问（测试阶段可临时开放0.0.0.0/0，生产环境要限制IP范围）。
  3. 登录EC2服务器，确认服务正在监听8080端口，进程未崩溃。
• 调整请求内容格式：直接用xhr.send(message.url)发送字符串，服务器可能无法解析。建议改成JSON格式发送，并设置请求头：

  xhr.setRequestHeader('Content-Type', 'application/json');
  xhr.send(JSON.stringify({ url: message.url }));
  

• 增强错误日志信息：在onerror里打印更多细节，方便定位问题：

  xhr.onerror = function () {
      console.log("** 请求错误详情");
      console.log("状态码:", xhr.status);
      console.log("状态文本:", xhr.statusText);
      console.log("响应内容:", xhr.responseText);
      console.log("readyState:", xhr.readyState);
  };
  

• 检查CORS配置：如果服务器和扩展存在跨域问题，需要在EC2服务器的响应中添加CORS头，比如：

  Access-Control-Allow-Origin: *
  

  生产环境要替换成扩展的ID或者特定域名。
• 验证扩展权限：虽然manifest里有<all_urls>，但可以尝试添加具体的服务器URL到权限列表，确保权限生效：

  "permissions": [
    "activeTab",
    "webRequest",
    "<all_urls>",
    "http://ec2-44-204-184-249.compute-1.amazonaws.com:8080/*"
  ]
  

临时阻止请求触发的方法 #

如果只是想在调试阶段阻止请求发送，直接注释掉xhr.send()即可：

// console.log("Send Request")
// xhr.send(message.url);

或者加个调试开关：

const isDebug = true;
if (!isDebug) {
    console.log("Send Request")
    xhr.send(message.url);
}

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