XMLHTTPRequest请求Open Weather返回状态码0，地址栏访问URL正常

兄弟，我太懂这种盯着代码半天找不到问题的烦躁了！状态码0在XHR请求里几乎都是浏览器层面的拦截导致的，结合你说的“直接输URL能正常返回”，大概率是下面这些原因，一个个排查：

最常见的原因：跨域资源共享（CORS）限制 #

浏览器的同源策略会阻止前端页面直接请求不同域名下的资源，而直接在地址栏输入URL是绕开了这个限制的。OpenWeather的API虽然是公开的，但默认可能需要你处理跨域：

• 首先确认你用的是HTTPS的API端点，现在OpenWeather的接口都是支持HTTPS的，比如https://api.openweathermap.org/...，HTTP的地址可能会被浏览器拦截
• 检查OpenWeather的API是否允许跨域请求：有些公开API会在响应头里加Access-Control-Allow-Origin，如果没有的话，你有两个办法：
  • 改用JSONP方式请求：在API URL后面加&callback=你的回调函数名，不过JSONP只支持GET请求
  • 搭一个后端代理：让你的前端请求自己的服务器，再由服务器去调用OpenWeather的API，这样就绕过了同源策略（生产环境推荐这个）
  • 开发环境临时解决：用Chrome的跨域调试模式，比如启动时加--disable-web-security --user-data-dir=/临时文件夹路径，但这只适合本地调试，绝对不能用于生产

请求配置的小细节 #

再检查下你的代码里有没有这些疏漏：

• 有没有正确调用httpRequest.send()？很多人写了open()就忘了这一步，请求根本没发出去，状态码就会是0
• 请求方法是不是对的？OpenWeather的API都是GET请求，别写成POST了
• 有没有混合内容的问题？如果你的页面是HTTPS的，却请求了HTTP的API地址，浏览器会直接阻止这个请求，状态码0没跑

给你一个能跑的示例代码 #

把你的代码改成这样试试（记得替换成自己的API密钥）：

(function() {
  var httpRequest;
  document.getElementById("weatherButton").addEventListener('click', makeRequest);

  function makeRequest() {
    httpRequest = new XMLHttpRequest();
    if (!httpRequest) {
      alert('Cannot create XMLHTTP instance!');
      return false;
    }

    httpRequest.onreadystatechange = function() {
      if (httpRequest.readyState === XMLHttpRequest.DONE) {
        if (httpRequest.status === 200) {
          console.log('请求成功：', httpRequest.responseText);
        } else {
          console.error('请求失败，状态码：', httpRequest.status);
        }
      }
    };

    // 替换成你的API密钥和目标城市
    const apiUrl = 'https://api.openweathermap.org/data/2.5/weather?q=Beijing&appid=你的API密钥';
    httpRequest.open('GET', apiUrl, true);
    httpRequest.send(); // 别忘了这一步！
  }
})();

最后再确认下你的API密钥是否有效，虽然状态码0不是密钥错误的典型表现，但万一密钥过期或者写错了也可能间接导致问题。

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