cross origin problems with extjs 6.01

Question

I'm using a POST form to login on my backend which works without any problem. The backend accepts all locations (*)

After I login, I'm ready to get some data and then I get Cross-Origin-request blocked: the Same Origin Policy doesn't allow thebackend.test/Statistics/.stat (Reason: CORS-header ‘Access-Control-Allow-Origin’ doens't corrspond with ‘*’).

    onLoginClick: function(buttons){

    // this.onLoginSuccess(null,null);
    // return;

        var me = this;
        var loginForm = this.lookupReference('loginForm');
        loginForm.submit({
            url: this.url,
            scope: this,
            success: me.onLoginSuccess,
            failure: me.onLoginFailure,
            waitMsg: 'Validating...'
        });
},

    onLoginSuccess: function (form, action) {

        var me = this;

            // destroy login window (form)
                me.getView().destroy();

        var check =     Ext.Ajax.request({
                        url     : 'http://thebackend.test/Statistics/.stat',
                        scope   : this,
                        withCredentials: true,
                        useDefaultXhrHeader: false,
                        cors: true,
                        params: {
                        entity: 'EmployeePid',
                        action: 'lst'
                    },
                        failure : function(response) {
                            console.log('failure is hit');
                        },
                        success : function(response) {

                        }
                    });

                console.log(check);
   }, ...

However, when I use firefox POSTER and simulate the call everything works: no cross origin problems - using EXACTLY! the same parameters (verified with HttpFox):

score 1 · Answer 1 · answered Jun 02 '16 at 21:31

1

I would suggest you to use Ext.data.JsonP.request instead of Ext.Ajax.request.

JSONP by definition from wiki

is a technique used by web developers to overcome the cross-domain restrictions imposed by browsers' same-origin policy that limits access to resources retrieved from origins other than the one the page was served by

Here is the documentation

answered Jun 02 '16 at 21:31

Vitalii Strimbanu

477
3
7

Thanks for your answer, as the POSTER tool doesn't use JSONP and works - I wanted to do it that way. the Server side can't use JSONP at this moment - – Chris Jun 02 '16 at 22:14

score 0 · Answer 2 · answered Jun 03 '16 at 02:41

0

I am sure you already know that JavaScript is case-sensitive; but did you know that Headers are, too?

The browser states correctly that Access-Control-Allow-Origin is not *, because Access-Control-Allow-Origin and access-control-allow-origin are two different headers - and only one of them is a valid CORS header.

answered Jun 03 '16 at 02:41

Alexander

19,906
19
75
162

Alas, the server side uses Access-Control-Allow-Origin in its setting and POSTER returns the data correct, only extjs refuses. access-control-allow-origin is shown in httpFox, don't know why. :-/ Would have been a nice answer though! – Chris Jun 04 '16 at 15:49
Don't know what httpFox extension does, and I don't know what POSTER extension does. Please check with Firefox builtin network tab and/or Chrome builtin network tab. If any of these shows the header to be all-lowercase `access-control-allow-origin`, then it **is** all-lowercase. – Alexander Jun 04 '16 at 16:21

score 0 · Answer 3 · answered Jun 09 '16 at 17:49

We solved this issue:

installed corsEverywhere firefox plugin to simulate an accepted cors so we could compare settings with/without simulation:
Access-Control-Allow-Credentials true wasn't set at the server. ( cookie authentication )
server ( Microsoft-IIS/7.5 ) didn't like * so we set remote site name explicit
removed trailing / in sitename

works

cross origin problems with extjs 6.01

3 Answers3

Linked