अनुरोध के शीर्षलेखों को कैसे बदला जाए?

Question

fetch ईवेंट द्वारा प्राप्त Request ऑब्जेक्ट के शीर्षलेखों को बदलना संभव है?

दो प्रयास:

1. संशोधित मौजूदा हेडर:

   self.addEventListener('fetch', function (event) { 
       event.request.headers.set("foo", "bar"); 
       event.respondWith(fetch(event.request)); 
   }); 
   

   Failed to execute 'set' on 'Headers': Headers are immutable साथ विफल।

2. नई Request वस्तु बनाएँ:

   self.addEventListener('fetch', function (event) { 
       var req = new Request(event.request, { 
       headers: { "foo": "bar" } 
       }); 
       event.respondWith(fetch(req)); 
   }); 
   

   Failed to construct 'Request': Cannot construct a Request with a Request whose mode is 'navigate' and a non-empty RequestInit.

साथ विफल (भी How to alter the headers of a Response? देखें)

Answer 1

एक नया अनुरोध वस्तु बनाना जब तक आप सभी विकल्पों को सेट के रूप में काम करता है शायद fetch इसे संभालने के बजाय इसे अपने यूआरएल को बदलने के लिए ब्राउजर पर रीडायरेक्शन को पास करना चाहते हैं।

सुनिश्चित करें कि आप जीईटी अनुरोधों पर शरीर सेट नहीं करते हैं - fetch इसे पसंद नहीं करता है, लेकिन ब्राउज़र अनुरोध कभी-कभी POST अनुरोधों से रीडायरेक्ट का जवाब देते समय शरीर के साथ GET अनुरोध उत्पन्न करते हैं। fetch इसे पसंद नहीं है।

Answer 2

आप एक समाधान से मिलता-जुलता साथ करने की कोशिश की है सवाल आप उल्लेख करते हैं (How to alter the headers of a Response?)?

सेवा कार्यकर्ता कुकबुक में, हम मैन्युअल रूप से इंडेक्स डीडी (https://serviceworke.rs/request-deferrer_service-worker_doc.html) में स्टोर करने के लिए अनुरोध ऑब्जेक्ट्स की प्रतिलिपि बना रहे हैं। यह एक अलग कारण के लिए है (हम उन्हें कैश में स्टोर करना चाहते थे, लेकिन हम https://github.com/slightlyoff/ServiceWorker/issues/693 की वजह से POST अनुरोधों को संग्रहीत नहीं कर सकते हैं), लेकिन यह भी लागू होना चाहिए कि आप क्या करना चाहते हैं।

// request is event.request sent by browser here 
var req = new Request(request.url, { 
    method: request.method, 
    headers: request.headers, 
    mode: 'same-origin', // need to set this properly 
    credentials: request.credentials, 
    redirect: 'manual' // let browser handle redirects 
}); 

आप उपयोग नहीं कर सकते मूल mode अगर यह navigate (यही कारण है कि आप एक अपवाद मिल रहे थे है) और तुम है:

// Serialize is a little bit convolved due to headers is not a simple object. 
function serialize(request) { 
    var headers = {}; 
    // `for(... of ...)` is ES6 notation but current browsers supporting SW, support this 
    // notation as well and this is the only way of retrieving all the headers. 
    for (var entry of request.headers.entries()) { 
    headers[entry[0]] = entry[1]; 
    } 
    var serialized = { 
    url: request.url, 
    headers: headers, 
    method: request.method, 
    mode: request.mode, 
    credentials: request.credentials, 
    cache: request.cache, 
    redirect: request.redirect, 
    referrer: request.referrer 
    }; 



    // Only if method is not `GET` or `HEAD` is the request allowed to have body. 
    if (request.method !== 'GET' && request.method !== 'HEAD') { 
    return request.clone().text().then(function(body) { 
     serialized.body = body; 
     return Promise.resolve(serialized); 
    }); 
    } 
    return Promise.resolve(serialized); 
} 

// Compared, deserialize is pretty simple. 
function deserialize(data) { 
    return Promise.resolve(new Request(data.url, data)); 
}