Why is my requestPayload empty on my ajax request

Question

We are trying to migrate from pure ext.js to a model that uses ext.js in the controller, but front end is pure html, bootstrap.

As we migrate, I am trying to make a ajax on a login request. I have a ajax call which is returning a empty requestPayload.

loginSubmit : function(param){
        var me = this,
        params = {
            url: 'login/login',
            method: "POST",
            jsonData: Ext.JSON.encode(param.formValues) ,
            success: function (response) {
                var data = Ext.JSON.decode(response.responseText);
                Insights.view.common.util.StorageUtil.setAppData(response.responseText);

                me.getView().destroy();

                Ext.create({
                    xtype: 'mainviewport'
                });
            },
            failure: function (response) {
                var errorMessage = "Network connect timeout error"
                if (response.status == 401 || response.status == 500) {
                    var data = Ext.JSON.decode(response.responseText);
                    errorMessage = data.message;
                }

                if(param.loginButton){
                    var errMsg = form.queryById('login-error-msg');
                    errMsg.setText(errorMessage);
                    errMsg.setVisible(true);
                    param.loginButton && params.loginButton.enable();
                }

            }
        };
        Insights.view.common.util.RequestUtil.request(params, 'false');
    },

I did a debug on Chrome and the requestPayload does not exist.

The pure ext.js project returns the following on debug on Chrome.

As you notice, this has the requestPayload with the username and password. Also failure: function (response) returns response.status=0. What am I missing in the pure javascript way of sending the request.

EDIT, adding RequestUtil Code

Ext.define('Insights.view.common.util.RequestUtil', {
    singleton: true,

    config: {
        baseUrl: ''
    },

    request: function (params, component) {
        var me = this,
            headers = {
                'ACCEPT': 'application/json'
            };


        var appData = Insights.view.common.util.StorageUtil.getAppData();
        if (appData) {
            headers.authToken = appData.token;
        } else if (params.authToken) {
            headers.authToken = params.authToken;
        }

        if(params.headers) {
            Ext.Object.merge(headers, params.headers)
        }

        this.loadMask(component);
        Ext.Ajax.request({
            url: this.getBaseUrl() + params.url,
            timeout: 60000,
            headers: headers,
            disableCaching: false,
            method: params.method,
            jsonData: params.jsonData,
            params: params.extraParams,
            binary: !params.binary ? false : params.binary,
            success: function (response, opts) {
                if (params.success) {
                    params.success(response, opts);
                    me.unLoadMask(component);
                }
            },
            failure: function (response, opts) {
                if (params.failure) {
                    params.failure(response, opts);
                }

                if (!Ext.isString(component)) {
                    me.unLoadMask(component);
                    if (params.url == "authenticate" || params.url == "userInfo") {
                        return;
                    }
                    var responseText = response.responseText && Ext.JSON.decode(response.responseText);
                    if (responseText && responseText.status === 'Failure') {
                        Ext.Msg.alert(i18nLabels.warning, responseText.message);
                    } else if (response.status == 401) {
                        me.handleSessionTimeout();
                    } else if (response.status == 404 || response.status == 500) {
                        me.errorHandler(responseText.message);
                    } else if (response.status == 405) {
                    } else {
                        me.errorHandler(i18nLabels.serverNotAvailable);
                    }
                }

            }
        });
    },

I debugged and checked, jsonData does have the username,password string. This ajax fails and enters failure segment.

Answer 1

The OPTIONS request in the first screen suggests that there is a CORS related problem. This problem can be solved by enabling CORS.

Author's solution (from comments): open -a Google\ Chrome --args --disable-web-security --user-data-dir="tmp/tmpChrome