Search code examples
javascriptextjsextjs4http-delete

HTTP DELETE request without body


I am facing the same problem as mentioned here: I am trying to connect my ExtJS 4.1 store with REST API, but when I delete the record from the store and consequently invoke HTTP DELETE method, it gets rejected by the server-side because the HTTP request that ExtJS sent contains body. Unfortunately, the accepted answer on the link above is not valid for version 4 of ExtJS and higher.

The best that I achieved so far is to send empty array (literally, [] ) as a body, but of course this is still rejected:

enter image description here

This is my code:

Ext.define('TT.proxy.CustomRestProxy', { 
    alias: 'proxy.customrestproxy', 
    extend: 'Ext.data.proxy.Rest', 

    buildRequest: function(operation) {

        var request = this.callParent(arguments);

        if(operation.action === 'destroy')
        {                                
            delete request.operation.records;
        }
        return request; 
    }
});

defineStore = function(storeName, modelName, url) {
    var storeProperties = {
        extend: 'Ext.data.Store',
        requires: modelName,
        model: modelName,
        id: storeName,

        proxy: {
            type: 'customrestproxy',
            url: url,
            batchActions: false,
            noCache: false,
            headers: { 'Content-Type': 'application/json' },                
            reader: {
                type : 'json',
                totalProperty: 'total',
                successProperty: 'success',
                root: 'data'
            },
            writer: {
                type : 'json'
            },              
        }
    };

    Ext.define(storeName, storeProperties);
};

I would accept any answer that solves this issue, it does not have to include ExtJS-specific features, i.e. intercepting AJAX request or similar technique is also welcome.


Solution

  • There is a workaround based on AJAX interceptor, inspired by this link. This code solves the problem regardless of the framework used, so it can be also useful for other people who are not necessarily using Ext JS:

    (function(XHR) {
        "use strict";
    
        var open = XHR.prototype.open;
        var send = XHR.prototype.send;
        var httpMethod;
    
        XHR.prototype.open = function(method, url, async, user, pass) {
            httpMethod = method;
            this._url = url;
            open.call(this, method, url, async, user, pass);
        };
    
        XHR.prototype.send = function(data) {
            if(httpMethod === 'DELETE')
            {
                data = null;            
            }        
            send.call(this, data);
        }
    })(XMLHttpRequest);