如何在 Javascript object 中取消修補方法？ 特別是 XMLHttpRequest.open

Question

我們有一個 React 應用程序，其中有人修補了 XMLHttpRequest.open 方法，如下所示：

const token = ....
let xhrPrevOpen = XMLHttpRequest.prototype.open;
XMLHttpRequest.prototype.open = function (...a) {
    xhrPrevOpen.apply(this, [ ...a ]);
    this.setRequestHeader('Authorization', `Bearer ${token}`);
};

顯然，這樣做是為了在整個應用程序的所有 http 請求中默認包含授權 header ，從而在每次有人需要發出請求時節省一行額外的代碼。

這件事的一個缺點是我們有一些用例，我們希望向外部 api（跨域）發出請求，這些請求需要它們自己的 Authorization 標頭。 默認情況下添加另一個授權 header 並沒有幫助，因為它附加了 header 而不是替換它。

修補是在 index.js 文件中完成的，該文件是加載整個反應 UI 的主文件。

有沒有辦法仍然可以調用未修補的方法或以某種方式能夠替換 XMLHttpRequest 中的授權 header。

顯然 XMLHttpRequest 似乎沒有辦法取消設置或替換標題。 它只有一種方法叫setRequestHeaders到 append 它們。

我想了幾個不同的方向來解決這個問題。 關於其中任何一個或替代方案的任何建議都會有所幫助。

1 - 嘗試使用原始參考（original）修補（patch2）已經修補的（patch1）方法，並在使用后將其修補回patch1方法。 不確定是否可以從 patch1 方法獲取原始參考。

2 - 將 index.js 中的原始引用保存到某個全局上下文中，並在進行外部調用時將 XMLHttpRequest.prototype.open 暫時更改為原始引用並將其重置。

3 - 找到取消設置和/或更換 header 的方法。

4 - 任何其他不使用 XMLHttpRequest 的其他 HTTP 請求庫。 我不確定是否存在。 我猜所有的庫，如 fetch、axios、jquery ajax 必須在下面使用 Z6253F5851545C17C。

Answer 1

這種情況有點不幸，理想的解決方案是不首先修補該方法，而是更新需要添加 header 的各種調用，以便他們這樣做（可能通過調用包裝函數）。

如果你不能這樣做：

我很想像這樣編輯index.js ：

const token = ....
let xhrPrevOpen = XMLHttpRequest.prototype.open;
XMLHttpRequest.prototype.open = function (...a) {
    xhrPrevOpen.apply(this, [ ...a ]);
    this.setRequestHeader('Authorization', `Bearer ${token}`);
};
XMLHttpRequest.prototype.__rawopen__ = xhrPrevOpen; // <====

...然后在您不希望修補open情況下使用__rawopen__而不是open 。

再說一遍：只有當你真的，真的無法撤消那個糟糕的open補丁時。

---

• 任何其他不使用下面的 XMLHttpRequest 的 HTTP 請求庫。 我不確定是否存在。 我猜所有的庫，如 fetch、axios、jquery ajax 必須在下面使用 Z6253F5851545C17C。

我不會假設在fetch的情況下，只要它是瀏覽器提供的本機版本。 我希望XMLHttpRequest和fetch都使用相同的底層內部功能，而不是使用暴露的XMLHttpRequest來逐字fetch ，用戶空間代碼可以使用它。 您可能想檢查您的目標瀏覽器，看看fetch是否真的受到您的代碼對XMLHttpRequest.prototype.open的更改的影響。 我懷疑不是，這會給你另一種解決問題的方法。