リクエストのヘッダーを変更するにはどうすればよいですか？

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を処理するのではなく、URLを変更できるようにリダイレクトをブラウザに戻したいと思うかもしれません。

GETリクエストでbodyを設定しないようにしてください。fetchはそれを気にしませんが、POSTリクエストからのリダイレクトに応答するときにブラウザがGETリクエストを生成することがあります。 fetchは好きではありません。

Answer 2

を、あなたは1つに同様のソリューションを試してみましたあなたが言及した質問（How to alter the headers of a Response?）？

Service Worker Cookbookでは、Requestedオブジェクトを手動でコピーしてIndexedDB（https://serviceworke.rs/request-deferrer_service-worker_doc.html）に格納しています。これは別の理由によるものです（キャッシュに格納したかったが、https://github.com/slightlyoff/ServiceWorker/issues/693のためにPOSTリクエストを保存できない）が、あなたのやりたいことにも当てはまるはずです。それはnavigate（あなたが例外を取得した理由です）、あなたの場合は

// 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：新しいリクエストオブジェクトを作成

// 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)); 
}