在 chrome 扩展中使用 fetch 发送空源头答案

【问题标题】：Using fetch in chrome extension sends null origin header在 chrome 扩展中使用 fetch 发送空源头
【发布时间】：2017-12-26 14:22:08
【问题描述】：

当使用 fetch API 发送跨源请求时，origin 请求标头被设置为 null，而不是我期望的 chrome://xxxxx。在 background.js 上下文和注入的 iframe 上下文中使用 fetch 会导致相同的行为。

当我改用 XMLHttpRequest 时，它会发送预期的原始标头。

manifest.json（或其他）中是否有一些控制阻止 fetch 按预期运行？我的理解是 origin 标头是“受保护的”，因此尝试手动设置它显然是行不通的。

【问题讨论】：

听起来像一个错误。相关：crbug.com/661827
听起来像一个错误：github.com/github/fetch/issues/444。正常的 XMLHttpRequest 确实发送了正确的源头
@Mark 你知道它是否发送过referer header吗？

标签： javascript google-chrome-extension fetch-api

【解决方案1】：

我注意到了同样的问题。我的解决方法是使用 XMLHttpRequest 而不是像 OP 提到的那样获取。使用 XHR，它确实以chrome://**extension-id** 发送原点，但不发送引用标头。 fetch 也没有引用标头。

如果有人想知道如何使用XMLHttpRequest。以下代码 sn-p 取自MDN XMLHttpRequest readState document：

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。您可以查看this article on how to turn XMLHttpRequest into promise 了解更多信息。

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

【讨论】：