Problem with preflight requests in a model/store connected to parse.com

[koenoe]

Hi there,

I'm working on a ST 2.1 mobile web app on a REST api at parse.com. It's working fine and fast, but I'm facing a weird problem and I can't figure it out.

At parse.com I've a data class called 'ReviewType'. My Sencha data model looks like this:

Ext.define('KRNWTR.model.ReviewType', {

    extend: 'Ext.data.Model',
    requires: ['KRNWTR.Config'],


    config: {
        fields: ['color','title','subtitle'],
        proxy: {
            type: 'rest',
            url: KRNWTR.Config.getApiUrl() + 'classes/ReviewType',
            headers: KRNWTR.Config.getHeaders(),
            reader: {
                type: 'json',
                rootProperty: 'results'
            }
        }
    }
});

And my data store looks like this:

Ext.define('KRNWTR.store.ReviewTypes', {


    extend: 'Ext.data.Store',
    requires: ['KRNWTR.model.ReviewType'],


    config: {
        model: 'KRNWTR.model.ReviewType'
    }
});

I also have a general option in my config:

Ext.Ajax.setUseDefaultXhrHeader(false);

The function I call to get my headers:

getHeaders: function(){
        return {
            'Content-Type': 'application/json',
            'X-Parse-Application-Id': this.getApplicationID(),
            'X-Parse-REST-API-Key': this.getApiKey()
        };
    },

In my controller I'm loading the store and it's dataview in my view is loading the records as it should be:

var store = Ext.getStore('ReviewTypes');
        store.load({
            scope: this,
            callback: this.storeLoaded    
        });

{
                        xtype: 'dataview',
                        store: 'ReviewTypes',
                        itemTpl: '<div class="review-types-item {color}"><div class="review-types-item-description"><strong>{title}</strong><br><span class="small">{subtitle}</span></div></div>'
                    }

In Chrome it's working fine and shows me these responses:
screenshot-chrome.jpg

As you can see there is a preflight request to identify the CORS and it's returning a 200.

In Safari 6 (Mac OS X) and Safari on iOS I see this:
screenshot-safari.png

Somehow I see 3 requests and the one with type 'Other' is causing a problem I think.
screenshot-safari2.png

See, no response headers. In Safari iOS (6.0/6.1) the app loads good and fast, but the network activity indicator in the status bar keeps showing activity:
screenshot-ios.PNG

I already tried disabling the preflight request by using 'withCredentials:true' in my store/model, but then it throws me the following error:

Cannot use wildcard in Access-Control-Allow-Origin when credentials flag is true.

.

Hopefully someone is able to help me.

Thanks in advance!

[mitchellsimoens]

This must be an issue with how safari is handling the CORS

[koenoe]

Yeah I think so too. In the bug history of Chrome I saw a similar bug and they fixed it. Hopefully Safari will fix it as well.