Request always returns failure, even though response code is 200. CORS also saying origin not allowed, but header exists

[Ryan Weiss]

Basically the reqwest is always hitting the error callback instead of success, no matter what the server response.

This is the reqwest wrapper code I'm using to send off the request:

function post(url, data, options) {
    var options = options || {};
    options.type = typeof data == 'object' ? 'json' : 'html';
    return req({
        url: url,
        type: options.type,
        data: data,
        method: 'post'
    });
}

The calling code:

req.post(LOGIN_URL, data)
    .then((resp) => {
        console.log('login returned', data);
                resolve(data);
    })
    .catch((err) => {
        console.log('login error', err);
               reject(err);
    }); 
});

Chrome network tabs shows that the request comes back okay with the appropriate response and a status code of 200, however, the actual Reqwest handling code always falls to the .catch() block or otherwise error callback (if I don't use promises), showing:

login error XMLHttpRequest {readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, responseURL: "http://api:8080/api/login"…}onabort: nullonerror: nullonload: nullonloadend: nullonloadstart: nullonprogress: nullonreadystatechange: ()ontimeout: nullreadyState: 4response: "Login success"responseText: "Login success"responseType: ""responseURL: "http://tripora:8080/api/login"responseXML: nullstatus: 200statusText: "OK"timeout: 0upload: XMLHttpRequestUploadwithCredentials: false__proto__: XMLHttpRequest

It doesn't make any sense to me why it would fall to the failure. I've also tried using the standard non-promise reqwest with req(options), function(response) {}, function(error) {}), and even then the error callback is still called instead of the success callback.

If I add some more options to the post (contentType and crossOrigin)

    return req({
        url: url,
        type: options.type,
        contentType: 'application/json',
        crossOrigin: true,
        data: data,
        method: 'post'
    });

...The server then returns a '400 Bad Request', and it still hits the error callback, saying:

XMLHttpRequest cannot load http://api:8080/api/login. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://api' is therefore not allowed access. The response had HTTP status code 400.

However, I have this header defined, allowing this origin. This same code has worked with other request libraries I've used without any issues.

Request Info:

Request URL:http://api:8080/api/login
Request Method:POST
Status Code:200 OK
Remote Address:192.168.0.3:8080

Response Headers
view source
Access-Control-Allow-Headers:Cache-Control,Content-Type,X-Requested-With,*
Access-Control-Allow-Methods:*
Access-Control-Allow-Origin:http://api
Connection:keep-alive
Content-Length:13
Content-Type:text/plain; charset=utf-8
Date:Wed, 28 Sep 2016 23:13:26 GMT
Vary:Accept-Encoding
X-RateLimit-Limit:100
X-RateLimit-Reset:1475104305195

Request Headers
view source
Accept:application/json, text/javascript
Accept-Encoding:gzip, deflate
Accept-Language:en-US,en;q=0.8,fr;q=0.6,pt;q=0.4
Cache-Control:no-cache
Connection:keep-alive
Content-Length:28
Content-Type:application/x-www-form-urlencoded
Host:tripora:8080
Origin:http://api
Pragma:no-cache
Referer:http://api/login
User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.116 Safari/537.36
Form Data
view source
view URL encoded
login:rw3iss
password:password

Anything look off?

[Ryan Weiss]

Well, the first error was appearing because I wasn't returning json from the server :-)
The second error is because, I think, even though I specify 'type = json' in the request, it transforms the request json object into a url-encoded string, which seems weird...