拦截react Native webview的每一个请求

Question

我正在尝试创建一个 WebView，它有一个钩子，可以捕获每个请求，拦截它，允许我编辑它并随后发送它。但我无法找到一种方法来拦截 webview 的每个请求（不仅仅是使用 onNavigationStateChange 进行 url 更改）。

下一步也将改变响应。

有什么想法可以在 React Native 中实现这样的事情吗？

Answer 1

您可以尝试借助 XMLHttpRequest 注入 js 来拦截 HTTP 请求/响应。这就是我为了我的目的所做的事情；

const MyWebview = props => {

const INJECTED_JAVASCRIPT = `(function() {
var open = XMLHttpRequest.prototype.open;
XMLHttpRequest.prototype.open = function() {
    this.addEventListener("load", function() {
        var message = {"status" : this.status, "response" : this.response}
        window.ReactNativeWebView.postMessage(JSON.stringify(message));
    });
    open.apply(this, arguments);
};})();`;

return (
  <WebView
    source={{ uri: 'https://example.com/' }}
    injectedJavaScript={INJECTED_JAVASCRIPT}
    onMessage={event => {
      console.log('>>>', event);
    }}
  />
 );
};

export default NewsWebview;

基本上，我们在这里所做的就是在此处添加一个侦听器 on INJECTED_JAVASCRIPT，以跟踪每个成功的 XMLHttpRequest 事务完成情况。并使用

window.ReactNativeWebView.postMessage(JSON.stringify(message));

我们通过 prop 将每个响应发送到 WebView onMessage。
有关 XMLHttpRequest 工作原理的更多信息