获取 CORS 请求的状态代码

Get Status Code on CORS Request

本文关键字：状态 代码 请求 CORS 获取      更新时间：2023-09-26

如何从 CORS 请求中return响应代码？我能够从 onload 事件中获取它，但我似乎无法将其取出并return以便我可以捕获它以进行值检查。

这是我基于 http://www.html5rocks.com/en/tutorials/cors/的代码：

createCORSRequest: function(method, url) {
    var xhr = new XMLHttpRequest();
    if ("withCredentials" in xhr) {
      // Check if the XMLHttpRequest object has a "withCredentials" property.
      // "withCredentials" only exists on XMLHTTPRequest2 objects.
      xhr.open(method, url, true);
    } else if (typeof XDomainRequest != "undefined") {
      // Otherwise, check if XDomainRequest.
      // XDomainRequest only exists in IE, and is IE's way of making CORS requests.
      xhr = new XDomainRequest();
      xhr.open(method, url);
    } else {
      // Otherwise, CORS is not supported by the browser.
      xhr = null;
    }
    return xhr;
  },
  makeCorsRequest: function() {
    // All HTML5 Rocks properties support CORS.
    var me = this;
    var url = 'http://google.com';
    var sCode = '';
    var xhr = me.createCORSRequest('GET', url);
    console.log('xhr', xhr);
    if (!xhr) {
      alert('CORS not supported');
      return;
    }
    // Response handlers.
    xhr.onload = function() {
      var text = xhr.responseText;
      var sCode = xhr.status;
      // var title = getTitle(text);
      // alert('Response from CORS request to ' + url + ': ' + xhr.status);
    };
    xhr.onreadystatechange = function() {
      console.log(this.status);
      sCode = this.status;
    }
    xhr.onerror = function() {
      alert('Woops, there was an error making the request.');
    };
    xhr.send();
    return sCode; // this returns an empty string or the initial value set to it and not from `onload` event
  }

一种方法可能是在 JS 中使用回调，因为我们可以将 JavaScript 中的函数作为参数传递给其他函数，并从内部异步调用它们。

我稍微修改了您的代码以使其异步响应，并添加了相关注释。观察下面callback的使用情况。

//make few changes to make it asynchronous.
makeCorsRequest: function(callback) {
    // All HTML5 Rocks properties support CORS.
    var me = this;
    var url = 'http://google.com';
    var sCode = '';
    var xhr = me.createCORSRequest('GET', url);
    console.log('xhr', xhr);
    if (!xhr) {
      callback('CORS not supported');
      return;
    }
    // Response handlers.
    xhr.onload = function() {
      var text = xhr.responseText;
      var sCode = xhr.status;
      // var title = getTitle(text);
      // alert('Response from CORS request to ' + url + ': ' + xhr.status);
      callback(null, text);
    };
    xhr.onreadystatechange = function() {
      console.log(this.status);
      callback(this.status);
    }
    xhr.onerror = function() {
      callback('Woops, there was an error making the request.');
    };
    xhr.send();
  }
//this function would be the callback, it would be called 'Asynchronously' form XHR events with err or real data. First parameter generally indicates error.
function handleCorsResponse(err, data) {
   //check if error occurred
   if (err) {
      //error handling here
   }
  //if no error occurred, proceed.
   console.log(data);
}
//let's call `makeCorsRequest` with `handleCorsResponse` as a parameter.
$payments.makeCorsRequest(handleCorsResponse);

注意：一个更好和推荐的方法是使用承诺。

相关文章：