Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

withCredentials on ajax causes INVALID_STATE_ERR: DOM Exception 11 #921

Closed
LoeiFy opened this issue Feb 10, 2014 · 3 comments
Closed

withCredentials on ajax causes INVALID_STATE_ERR: DOM Exception 11 #921

LoeiFy opened this issue Feb 10, 2014 · 3 comments

Comments

@LoeiFy
Copy link

@LoeiFy LoeiFy commented Feb 10, 2014

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.

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

This comment has been minimized.

Copy link

@mwager mwager commented Mar 6, 2014

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

This comment has been minimized.

Copy link
Collaborator

@mislav mislav commented Mar 6, 2014

Thanks. Closing as duplicate of the above PR

@mwager

This comment has been minimized.

Copy link

@mwager mwager commented Apr 25, 2014

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
3 participants
You can’t perform that action at this time.