從 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，而不是表單提交或資產調用。