在 chrome 擴展中使用 fetch 發送 null origin header

Question

當使用 fetch API 發送跨源請求時， origin請求 header 被設置為 null 而不是我期望的chrome://xxxxx 。 在 background.js 上下文和注入的 iframe 上下文中使用 fetch 會導致相同的行為。

當我改用 XMLHttpRequest 時，它會發送預期的來源 header。

manifest.json（或其他東西）中是否有一些控制阻止 fetch 按預期運行？ 我的理解是origin header 是“受保護的”，因此嘗試手動設置它顯然不起作用。

Answer 1

我注意到了同樣的問題。 我的解決方法是使用XMLHttpRequest而不是像OP提到的那樣獲取。 使用XHR，它確實發送源為chrome://**extension-id**但不是referer頭。 沒有帶有fetch的 referer標頭。

如果有人想知道如何使用XMLHttpRequest 。 以下代碼片段取自MDN XMLHttpRequest readState文檔 ：

var xhr = new XMLHttpRequest();
console.log('UNSENT', xhr.readyState); // readyState will be 0

xhr.open('GET', '/api', true);
console.log('OPENED', xhr.readyState); // readyState will be 1

xhr.onprogress = function () {
    console.log('LOADING', xhr.readyState); // readyState will be 3
};

xhr.onload = function () {
    console.log('DONE', xhr.readyState); // readyState will be 4
};

xhr.send(null);

如果您更喜歡使用promise，則可以使用promise來包裝XMLHttpRequest。 您可以查看本文，了解如何將XMLHttpRequest轉換為承諾以獲取更多信息。

function xhr(params) {
  return new Promise(function(resolve, reject) {
    let xhr = new XMLHttpRequest();
    let url = '';

    xhr.open('POST', url + params);

    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.responseType = '';

    xhr.onerror = function() {
      reject(new Error('error'));
    };

    xhr.onload = function() {
      // do something with response
      let res = xhr.response;
      resolve(res);
    };

    // send request
    body = JSON.stringify({ params });
    xhr.send(body);
  })
}

Answer 2

從擴展后台工作程序（使用清單 V3）執行時，應該有某種方法可以使提取發送 Origin header ...使用特定的referrerPolicy怎么樣？ ( https://googlechrome.github.io/samples/fetch-api/fetch-referrer-policy.html )