Question

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

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

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

Answer 1

我注意到了同样的问题。我的解决方法是使用XMLHttpRequest而不是像OP提到的那样获取。使用XHR，它会将原始来源发送为chrome://**extension-id**，而不是引用标头。也没有带有fetch的引荐来源标头。

万一有人想知道如何使用XMLHttpRequest。以下代码摘自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);
  })
}

在chrome扩展中使用fetch会发送null origin头

1 个答案: