Не удается получить доступ к заголовку «Content-Length» в Fetch API, запрос CORS в расширении Chrome - PullRequest
0 голосов
/ 01 июля 2019

Я делаю расширение для Web Scraper для Chrome, мне нужно получить доступ к некоторой информационной междоменной области. Я устанавливаю режим запроса на CORS, но все еще не могу получить доступ к Content-Length: он возвращает ноль, хотя это не так. Посмотрев в Google и прочитав веб-сайт MDN, я прочитал здесь , что «Content-Length» разрешено в запросах CORS, но это не так, по крайней мере в Google Chrome. Я на 100% уверен, что заголовок предоставлен сервером: я проверил на вкладке Chrome DevTools Network, и он показывает это.

Просто чтобы сделать это очень ясным , я НЕ МОГУТ изменить что-либо в бэкэнде.

Что я могу сделать, чтобы получить доступ к этому заголовку? Если я не могу ничего с этим поделать, кто-нибудь может объяснить, почему HTTP-заголовок «Content-Length» запрещен в запросе Chrome CORS?

Для моего расширения я обернул Fetch API следующим образом:

/**
 * Utility wrapper function for the 'fetch()' API, allows automatic retry upon
 * any error occurring during the request. It will trigger a given callback or waits
 * a specified amount of time before re-executing the function (4000 milliseconds
 * by default) whenever 'fetch()' throws an exception or returns an error state.
 * @param input 'fetch' API argument.
 * @param init 'fetch' API argument.
 * @param timeout Upon error, milliseconds to wait before retrying.
 */
const $fetch = async (input, init, onerror, timeout) => {
  try {
    const response = await window.fetch(input, init);
    if (response.status >= 400) {
      await new Promise(r => setTimeout(r, timeout));
      if (onerror) {
        return await onerror();
      } else {
        init.cache = 'no-cache';
        return await $fetch(input, init, onerror, timeout);
      }
    } else {
      return response;
    }
  } catch (e) {
    await new Promise(r => setTimeout(r, timeout));
    if (onerror) {
      return await onerror();
    } else {
      init.cache = 'no-cache';
      return await $fetch(input, init, onerror, timeout);
    }
  }
};

Тогда я вызываю завернутую Fetch:

const response = await /* wrapped fetch */ $fetch(video.source, {  // 'video.source' is a url for an external CDN.
  mode: 'cors'
});
console.log(response.headers.get('Content-Length') || response.headers.get('content-length'));  // null
// I'm consuming the response as a ReadableStream
const reader = response.body.getReader();
const pump = async () => {
  const { done, value } = await reader.read();
  if (!done) {
    let blob = new Blob([value]);
    // ...
    await pump();
  }
  else {
    // ...
  }
};
await pump();
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...