Override Backbone.ajax method to use cordovaHTTP

Question

I am working on a phonegap app which uses Backbone JS. During ajax calls the header contains:

"Origin":"file://"

Which is not supported by the server. I tried to set Origin header as null but in chrome it is not allowed.

Backbone.ajax = function() {  
    arguments[0].headers = {
        'Accept': "application/json",
        'Origin': "null"
    };
    return Backbone.$.ajax.apply(Backbone.$, arguments);      
  };

Which throws error:

Refused to set unsafe header "Origin"

Only work around I can think of to solve this issue is to use the cordovaHttp plugin. But I am unable to figure out how to override Backbone.ajax to use cordovHTTP.

Link to the cordova plugin: https://github.com/silkimen/cordova-plugin-advanced-http

Although this is related to CORS, my question is specific to Overriding Backbone ajax method using the cordovaHttpPlugin

Possible duplicate of [Cross-domain requests using PhoneGap and jQuery doesn't work](https://stackoverflow.com/questions/10173427/cross-domain-requests-using-phonegap-and-jquery-doesnt-work) — T J, Jan 26 '18 at 13:53
The `origin` header is always set by the browser, or in your case, I guess the phone webview. You can't change it in JS. — Emile Bergeron, Jan 26 '18 at 13:55
@EmileBergeron I know that the browser will always set the Origin header. In this case, the server will not allow the Origin file:// but it will allow Origin:null . So here I'm trying to override Backbone.ajax to use cordova plugin cordova-HTTP which will allow to set Origin header as null — Sreekanth, Jan 26 '18 at 18:54

Sreekanth · Accepted Answer · 2018-02-28T12:41:58.020

It works:

function isPhoneGap() {
    return (window.cordova || window.PhoneGap || window.phonegap) 
    && /^file:\/{3}[^\/]/i.test(window.location.href) 
    && /ios|iphone|ipod|ipad|android/i.test(navigator.userAgent);
}

Backbone.sync = function( method, model, options ) {

        if(method == "read"){

            if(isPhoneGap()){
                cordova.plugin.http.get(model.url, {}, { Origin: "null" }, function(response) {
                    // prints 200
                    console.log(response.status);
                    try {
                        options.success(JSON.parse(response.data));
                    } catch(e) {
                        console.error("JSON parsing error");
                    }
                }, function(response) {
                    console.log(response.status);
                    console.log(response.error);
                });
            }else{

                $.ajax({
                    type : 'GET',
                    url : model.url,
                    dataType : 'json',
                    success : function(data) {
                        console.log(data);
                        if(model instanceof Backbone.Collection){
                            model.reset(JSON.parse(JSON.stringify(data)));
                        }else{
                            model.set(JSON.parse(JSON.stringify(data)));
                        }
                    }
                });
            }
        }
  }

This works when we invoke collection.fetch or model.fetch – Sreekanth Jan 28 '18 at 11:03 — Sreekanth, Jan 28 '18 at 11:03

Override Backbone.ajax method to use cordovaHTTP

1 Answers1