Fetch API and Cordova

Question

I am having problems when using together Cordova and fetch API. I am executing the following code

fetch(BASE_URL + '/auth/login', {
  method: 'post',
  credentials: 'include',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/x-www-form-urlencoded'
  },
  body: transformRequest({username: email, password: password})
}).then(response => {
      console.log(response.headers.get('X-AuthToken'))
});

When the code is executed in the browser the 'X-AuthToken' header is correctly retrieved and logged. When I run the same code when packaged in my Cordova app the 'X-AuthToken' header is null. Moreover what is strange is that i can see perfectly the header set when checking the response server side and when sniffing on the network so I am completely sure the header is there (simply it is not returned by the fetch API); in fact when using the equivalent XMLHttpRqeuest the header is correctly set:

var xhttp = new XMLHttpRequest();
xhttp.open("POST", BASE_URL + /api/auth/login", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("username=username&password=password");
xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
       console.log (xhttp.getResponseHeader('X-AuthToken'));
    }
}

It is worth signaling that when I try to dump other common headers like pragma, cache-control, ... they are correctly logged. It seams like the fetch API is filtering the headers and removing the ones that are not standard. Is someone else experiencing the same problem? Am I missing something?

Answer 1

Nicely put question, you are developing on the cutting edge. I would stick to XMLHTTPRequest for now. Fetch api is not properly implemented in webkit. See webkit bugzilla bug 151937