CODEWITHSUNDEEP
ajaxextjscors
Chris
Chris

Reputation: 175

cross origin problems with extjs 6.01

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):

enter image description here

Upvotes: 0

Views: 1419

Answers (3)

Chris
Chris

Reputation: 175

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

Upvotes: 0

Alexander
Alexander

Reputation: 20224

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.

Upvotes: 0

Vitalii Strimbanu
Vitalii Strimbanu

Reputation: 477

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

Upvotes: 1

Related Questions