1

我正在尝试构建一个基于 SproutCore 1.8 的网络应用程序。为了从服务器检索数据，应用程序向在单独域上运行的 REST Web 服务发出 CORS 请求。

代码如下所示：

var request = SC.Request.getUrl('http://example.com/some/path');
request.set('attachIdentifyingHeaders', NO);    
request.json().notify(this, this.didFetchData).send();

这在 Chrome、Safari 和 Firefox 中运行良好，但在 Internet Explorer 9 中不起作用。事实上，IE9 在 SproutCore 的内部请求实现中遇到了 JavaScript 错误“访问被拒绝”。此行引发错误：

// initiate request.
rawRequest.open(this.get('type'), this.get('address'), async);

经过一些简短的调查，我发现微软在 IE9 中为 CORS 请求实现了一个专用的 XDomainRequest 对象。正如我从这些行（SproutCore 本机请求实现选择）推断的那样，SproutCore 似乎不支持这一点：

return tryThese(
  function() { return new XMLHttpRequest(); },
  function() { return new ActiveXObject('Msxml2.XMLHTTP'); },
  function() { return new ActiveXObject('Microsoft.XMLHTTP'); }
);

这是 SproutCore 的缺点还是我遗漏了什么？如果是这样，您对如何在不编写自己的请求抽象的情况下解决该问题有任何建议吗？

请注意，CORS 是我正在使用的现有服务器基础架构的要求。我既不能将服务放在与交付客户端的服务器相同的域上，也不能使用反向代理或类似的基础设施来解决问题。

4

2 回答 2

2

你有两个选择

1) 破解 Sproutcore 本身。你可以尝试添加

function() {return new XDomainRequest(); }

到那个不同的xhr运输清单。先添加；如果它在浏览器上可用，它将被使用，否则代码将退回到其他对象。

2）如果您不想修改 SC 源，您可以创建自己的App.CorsResponse扩展类SC.XHRResponse。在您的实现中，提供您自己的createRequest方法并执行我在 1) 中所说的操作。每当您创建请求时，将 指定responseClass为您的自定义实现。

于 2012-04-24T12:10:36.040 回答
1

我已经根据 hvgotcodes 的建议快速编写了一个解决方案。下面的代码实现了一个子类，SC.XHRResponse它添加了处理特定于 IE 的 XDomainRequest CORS 请求所需的功能。请注意，当使用 XDomainRequest 时，这还不能处理 IE 中的错误。

MyApp.CorsRequest = SC.XHRResponse.extend({
  createRequest: function() {
    function tryThese() {
      for (var i=0; i < arguments.length; i++) {
        try {
          var item = arguments[i]();
          return item;
        } catch (e) {}
      }
      return NO;
    }

    return tryThese(
      function() { return new XDomainRequest(); },
      function() { return new XMLHttpRequest(); },
      function() { return new ActiveXObject('Msxml2.XMLHTTP'); },
      function() { return new ActiveXObject('Microsoft.XMLHTTP'); }
    );
  },

  invokeTransport: function() {
    var rawRequest, transport, handleReadyStateChange, async, headers;

    rawRequest = this.createRequest();
    this.set('rawRequest', rawRequest);

    // configure async callback - differs per browser...
    async = !!this.getPath('request.isAsynchronous');

    if (async) {
      if (!SC.browser.isIE && !SC.browser.isOpera) {
        SC.Event.add(rawRequest, 'readystatechange', this,
                     this.finishRequest, rawRequest);
      } else if(SC.browser.isIE) {
           transport = this;
        handleLoad = function() {
          if (!transport) { return null; }
          var ret = transport.finishRequest();
          if (ret) { transport = null; }
          return ret;
        };
        rawRequest.onload = handleLoad;          
      } else {
        transport = this;
        handleReadyStateChange = function() {
          if (!transport) { return null; }
          var ret = transport.finishRequest();
          if (ret) { transport = null; }
          return ret;
        };
        rawRequest.onreadystatechange = handleReadyStateChange;
      }
    }

    // initiate request.
    rawRequest.open(this.get('type'), this.get('address'), async);

    // now send the actual request body - for sync requests browser will
    // block here
    rawRequest.send(this.getPath('request.encodedBody')) ;
    if (!async) { this.finishRequest(); }

    return rawRequest;
  }, 

  finishRequest: function(evt) {
    var rawRequest = this.get('rawRequest'),
        readyState = rawRequest.readyState,
        error, status, msg;

       if (SC.browser.isIE) {
            readyState = 4;
            rawRequest.status = 200;
       }       

    if (readyState === 4 && !this.get('timedOut')) {
      this.receive(function(proceed) {
        if (!proceed) { return; }

        // collect the status and decide if we're in an error state or not
        status = -1;
        try {
          status = rawRequest.status || 0;
        } catch (e) {}

        // if there was an error - setup error and save it
        if ((status < 200) || (status >= 300)) {

          try {
            msg = rawRequest.statusText || '';
          } catch(e2) {
            msg = '';
          }

          error = SC.$error(msg || "HTTP Request failed", "Request", status);
          error.set("errorValue", this) ;
          this.set('isError', YES);
          this.set('errorObject', error);
        }

        // set the status - this will trigger changes on related properties
        this.set('status', status);
      }, this);

      // Avoid memory leaks
      if (!SC.browser.isIE && !SC.browser.isOpera) {
        SC.Event.remove(rawRequest, 'readystatechange', this, this.finishRequest);
      } else {
           if (window.XDomainRequest)
                rawRequest.onload = null;
           else
             rawRequest.onreadystatechange = null;
      }

      return YES;
    }
    return NO;
  } 
});
于 2012-04-24T14:43:31.193 回答