从 Javascript 客户端设置 header 值

Question

我想从浏览器中设置一个客户 header，类似于 chrome 上的 mod 插件，有没有办法从 javascript 客户端设置 header？

根据一个条件，我想设置一个 header 以便所有后续浏览器请求都具有这个 header 值。

我从服务器端知道这一点，但想知道从客户端是否有可能。

Answer 1

在 vanilla JS 中执行此操作的一个简单方法是增加XMLHTTPRequest.prototype.send方法。

你会做类似的事情

const defaultSend = XMLHTTPRequest.prototype.send;
XMLHTTPRequest.prototype.send = function (data) {
  this.setRequestHeader('SOME-CUSTOM-HEADER', 'header-value');
  defaultSend.call(this, data);
};

虽然这行得通，但就像在需要锤子时使用核武器一样。 它污染了在特定 window 的上下文中运行的以下所有 XHR。 虽然您可以进行域级别过滤，但我发现这不值得麻烦。

如果您使用axios等客户端 XHR 库，它们通常会提供更好、更符合上下文的方式。 例如，在 axios 的情况下，您可以执行类似的操作

const client = axios.createClient();
client.interceptors.request.use(config => {
  config.headers['SOME-CUSTOM-HEADER'] = 'header-value';
  return config;
});
client.get('/some-url', params); // this will have the custom header that you injected

编辑：这里的一个警告是，这只会影响 XHR，而不是表单提交或资产调用。