javascript - 拦截 react native webview 的每一个请求

Question

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

下一步也是改变响应。

任何想法如何在 React Native 中实现这样的目标？

Answer 1

您可以尝试在 XMLHttpRequest 的帮助下注入(inject) 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;

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

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

我们通过 onMessage 向 WebView 发送每个响应支柱。
More on how XMLHttpRequest works