新手编写JavaScript代码遇XMLHttpRequest返回状态码0问题求助

嘿，刚上手JavaScript就碰到这个问题太正常了，我来帮你拆解一下XMLHttpRequest返回状态码0的常见原因和解决办法！

1. 本地直接用file://协议打开HTML文件 #

如果你是直接双击HTML文件在浏览器里打开的，这时候页面是通过file://协议加载的。浏览器的同源策略会阻止这种本地文件发起的HTTP请求，直接返回状态码0。

• 解决办法：把你的HTML文件放到本地服务器环境里运行，比如用XAMPP、WAMP搭建PHP环境，或者用Node.js的http-server工具快速启动一个本地服务器。这样页面会通过http://localhost这类HTTP协议加载，就能正常发起请求了。

2. 跨域请求被浏览器拦截 #

如果你的MYSERVERADDRESS/login.php地址和当前页面的域名、端口、协议任意一个不一致，就会触发跨域限制，浏览器会直接拦截请求，返回状态码0。

• 解决办法：
  • 优先保证前端页面和后端接口在同一个域名下（比如都部署在http://localhost下）；
  • 如果必须跨域，需要在后端的login.php中添加CORS响应头，开发环境可以先这么设置：

    header("Access-Control-Allow-Origin: *"); // 生产环境记得替换成具体的前端域名
    header("Access-Control-Allow-Methods: POST");
    header("Access-Control-Allow-Headers: Content-Type");
    

3. 请求被取消或服务器无响应 #

有时候请求还没完成就遇到页面刷新、跳转，或者服务器端的login.php本身运行出错、没有返回任何响应，也会导致状态码0。

• 解决办法：
  • 先直接在浏览器地址栏访问MYSERVERADDRESS/login.php，看看服务器能不能正常返回内容；
  • 确保调用myTable()函数后，页面没有立即刷新或跳转；
  • 给XMLHttpRequest加上错误和取消监听，方便排查问题：

    http.onerror = function() {
      console.log("请求过程中出现错误");
    };
    http.onabort = function() {
      console.log("请求被中途取消了");
    };
    

4. 请求头设置不完整或错误 #

看你代码里的Content-Type好像没写完，POST表单请求的正确Content-Type应该是application/x-www-form-urlencoded，设置错误也可能导致请求异常。给你修正一下代码片段：

function myTable() {
  var http = new XMLHttpRequest();
  var url = "MYSERVERADDRESS/login.php";
  var params = "username=ABC&password=123";
  http.open("POST", url, true);
  // 补全正确的Content-Type请求头
  http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  // 添加状态监听，方便查看返回结果
  http.onreadystatechange = function() {
    if (http.readyState === 4) {
      console.log("返回状态码：", http.status);
      console.log("服务器响应内容：", http.responseText);
    }
  };
  http.send(params);
}

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