javascript - Cache api - add XMLHttpRequest object

Question

I have just started using Cache API of javascript. I need to set a header in all my GET request, hence i passed in my request object to the "add" method like the following,

        //Request object construction
        let xmlHttp = new XMLHttpRequest();
        xmlHttp.onreadystatechange = function() { 
            if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                console.log(xmlHttp.responseText);
            }
        };
        xmlHttp.open("GET", reqURL, true);
        xmlHttp.setRequestHeader('MY-HEADER',myHeaderValue);
        xmlHttp.setRequestHeader('Content-Type', 'application/json');
        xmlHttp.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); 

        //Cache operations
        let cacheObj = await 
            caches.open(cacheName),
            result = await cacheObj.match(reqURL, options);
        if(emberUtils.isNone(result)) {
            cacheObj.add(xmlHttp);
        } else {
            console.log("match found");
            console.log(result);
        }

But instead of the constructed request object, the request is sent with the XMLHttpRequest directly appended to the base url like www.mytestforcaching.com/[object%20XMLHttpRequest]. Please help me with sending the constructed request object or setting headers in the request for cache api.

Thanks in advance :)