Javascript 函数 onload 从未被调用

Question

我希望通过Web服务的get请求获取一个json文件，并且我有一个“跨源请求”，所以我检查“withCredentials”，然后使用onload函数在上显示json的内容控制台。

function createCORSRequest(method, url) {
  var xhr = new XMLHttpRequest();

  if ("withCredentials" in xhr) {
    xhr.open(method, url, true);
    console.log("withCredentials is true");

    xhr.onload = function() {
      console.log('ok');
      if (xhr.status >= 200 && xhr.status < 400) {
        data.forEach(card => {
          console.log(card.nameEnglish1);
        })
      } else {
        console.log('error');
      }
    };

    xhr.onerror = function() {
      console.log('There was an error!');
    };

  } else if (typeof XDomainRequest != "undefined") {
    xhr = new XDomainRequest();
    xhr.open(method, url);
  } else {
    xhr = null;
  }
  return xhr;
}

var xhr = createCORSRequest('GET', 'http://192.168.42.176:8080/batch-recup-mtg-0.0.1-SNAPSHOT/mtg/cards/search?setCode=AKH');
if (!xhr) {
  throw new Error('CORS not supported');
}

但是什么也没发生，我的 onload 函数从未被调用，并且我没有任何错误。我确信网络服务正在工作，因为我在浏览器中尝试过它。您知道为什么 onload 函数从未被调用吗？

编辑:显示 console.log("withCredentials is true");，但不显示 console.log('ok');

Answer 1

你需要

xhr.send();

function createCORSRequest(method, url) {
  var xhr = new XMLHttpRequest();

  if ("withCredentials" in xhr) {
    xhr.open(method, url, true);
    console.log("withCredentials is true");

    xhr.onload = function() {
      console.log('ok');
      if (xhr.status >= 200 && xhr.status < 400) {
        data.forEach(card => {
          console.log(card.nameEnglish1);
        })
      } else {
        console.log('error');
      }
    };

    xhr.onerror = function() {
      console.log('There was an error!');
    };

    // added send call here:
    xhr.send();

  } else if (typeof XDomainRequest != "undefined") {
    xhr = new XDomainRequest();
    xhr.open(method, url);
  } else {
    xhr = null;
  }
  return xhr;
}

var xhr = createCORSRequest('GET', 'http://google.com/');
if (!xhr) {
  throw new Error('CORS not supported');
}