web-dev-qa-db-ja.com

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

Request イベントによって受信される fetch オブジェクトのヘッダーを変更することは可能ですか？

2つの試み：

  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.で失敗する

（参照 応答のヘッダーを変更する方法？ ）

javascriptservice-worker
15
mjs

すべてのオプションを設定している限り、新しいリクエストオブジェクトの作成は機能します。

// 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の場合（例外が発生したため）、元のfetchを使用することはできません。おそらく、_ [ではなく、リダイレクトをブラウザに戻してURLを変更させたいと考えています。 $ var] _それを処理します。

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

11
pirxpilot

あなたが言及した質問の解決策と同様の解決策を試しましたか（ 応答のヘッダーを変更する方法？ ）？

Service Workerクックブックでは、Requestオブジェクトを手動でコピーしてIndexedDBに保存しています（ https://serviceworke.rs/request-deferrer_service-worker_doc.html ）。別の理由があります（キャッシュに保存したかったのですが、 https://github.com/slightlyoff/ServiceWorker/）のためにPOSTリクエストを保存できません） issues/69 ）ですが、やりたいことにも当てはまるはずです。

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

元のリクエストに基づいて新しいリクエストを作成し、ヘッダーを上書きできます。

new Request(originalRequest, {
  headers: {
    ...originalRequest.headers,
    foo: 'bar'
  }
})
2
caisah