withCredentials on ajax causes INVALID_STATE_ERR: DOM Exception 11

[LoeiFy]

i use basket.js : * http://addyosmani.github.io/basket.js/ for my page

and use zepto for ajax width CORS

    _load: function(type, url, data, func) {
        try {
        $.ajax({
            type: type,
            url: url,
            beforeSend: function(xhr) { xhr.withCredentials = true },
            data: data,
            cache: false,
            timeout: 5000,
            success: function(data) { func(data) },
            error: function() { alert('error') }
        });
        } catch (e) { alert(e) }
    }

it is OK in PC chrome .
but in android webview
the page throw an error INVALID_STATE_ERR: DOM Exception 11

finally i found this

Therefore, use the open method on the XMLHttpRequest object before setting the withCredentials attribute.

• http://www.w3.org/TR/XMLHttpRequest2/#the-withcredentials-attribute

this will throw INVALID_STATE_ERR: DOM Exception 11 :

var xhr = new XMLHttpRequest();  
xhr.withCredentials = true;
xhr.open("POST", "url", true);  
xhr.send();

OK :

var xhr = new XMLHttpRequest();  
xhr.open("POST", "url", true);  
xhr.withCredentials = true;
xhr.send();

so i change zepto source code

original :

    // ...
    if (settings.headers) for (name in settings.headers) setHeader(name, settings.headers[name])
    xhr.setRequestHeader = setHeader

    xhr.onreadystatechange = function(){
      if (xhr.readyState == 4) {
        xhr.onreadystatechange = empty
        clearTimeout(abortTimeout)
        var result, error = false
        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304 || (xhr.status == 0 && protocol == 'file:')) {
          dataType = dataType || mimeToDataType(settings.mimeType || xhr.getResponseHeader('content-type'))
          result = xhr.responseText

          try {
            // http://perfectionkills.com/global-eval-what-are-the-options/
            if (dataType == 'script')    (1,eval)(result)
            else if (dataType == 'xml')  result = xhr.responseXML
            else if (dataType == 'json') result = blankRE.test(result) ? null : $.parseJSON(result)
          } catch (e) { error = e }

          if (error) ajaxError(error, 'parsererror', xhr, settings, deferred)
          else ajaxSuccess(result, xhr, settings, deferred)
        } else {
          ajaxError(xhr.statusText || null, xhr.status ? 'error' : 'abort', xhr, settings, deferred)
        }
      }
    }

    if (ajaxBeforeSend(xhr, settings) === false) {
      xhr.abort()
      ajaxError(null, 'abort', xhr, settings, deferred)
      return xhr
    }

    if (settings.xhrFields) for (name in settings.xhrFields) xhr[name] = settings.xhrFields[name]

    var async = 'async' in settings ? settings.async : true
    xhr.open(settings.type, settings.url, async, settings.username, settings.password)

    for (name in headers) nativeSetHeader.apply(xhr, headers[name])
    //...

after:

    //...
    if (settings.headers) for (name in settings.headers) setHeader(name, settings.headers[name])
    xhr.setRequestHeader = setHeader

    var async = 'async' in settings ? settings.async : true
    xhr.open(settings.type, settings.url, async, settings.username, settings.password)

    xhr.onreadystatechange = function(){
      if (xhr.readyState == 4) {
        xhr.onreadystatechange = empty
        clearTimeout(abortTimeout)
        var result, error = false
        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304 || (xhr.status == 0 && protocol == 'file:')) {
          dataType = dataType || mimeToDataType(settings.mimeType || xhr.getResponseHeader('content-type'))
          result = xhr.responseText

          try {
            // http://perfectionkills.com/global-eval-what-are-the-options/
            if (dataType == 'script')    (1,eval)(result)
            else if (dataType == 'xml')  result = xhr.responseXML
            else if (dataType == 'json') result = blankRE.test(result) ? null : $.parseJSON(result)
          } catch (e) { error = e }

          if (error) ajaxError(error, 'parsererror', xhr, settings, deferred)
          else ajaxSuccess(result, xhr, settings, deferred)
        } else {
          ajaxError(xhr.statusText || null, xhr.status ? 'error' : 'abort', xhr, settings, deferred)
        }
      }
    }

    if (ajaxBeforeSend(xhr, settings) === false) {
      xhr.abort()
      ajaxError(null, 'abort', xhr, settings, deferred)
      return xhr
    }

    if (settings.xhrFields) for (name in settings.xhrFields) xhr[name] = settings.xhrFields[name]

    for (name in headers) nativeSetHeader.apply(xhr, headers[name])
    //...

just move up xhr.open , then everthing is OK

so i think zepto should move up xhr.open

[mwager]

same issue here, (v1.1.3), fix would be nice
see also #935

edit: just confirming that the fix of @LoeiFy worked on a galaxy note 10.1 within a cordova app

[mislav]

Thanks. Closing as duplicate of the above PR

[mwager]

The above change will fix the issue on android but break the unit tests:

zepto.html - Finished in 2.994 s. – 179 tests passed (823 assertions)
ZeptoAjaxTest2#testBeforeSendCanChangeMethod: Failed assertion. Expected %o to be == to %o.
[Safari 534.34] ZeptoAjaxTest2#testBeforeSendCanChangeMethod: Expected POST to be == to PUT. Failed assertion.
ZeptoAjaxTest2#testBeforeSendCanChangeUrl: Failed assertion. Expected %o to be == to %o.
[Safari 534.34] ZeptoAjaxTest2#testBeforeSendCanChangeUrl: Expected one to be == to two. Failed assertion.
ajax.html - Finished in 1.536 s. – 2 failures, 0 errors (209 assertions)

I will investigate more on this issue.