React Native WebView跨源页面postMessage无响应问题求助

这个问题我之前也碰到过，核心原因是React Native的WebView默认只信任初始加载的源域名发送的postMessage消息，当页面跳转到其他域名后，新页面的消息会被WebView的安全策略拦截，导致RN端收不到。下面给你几个可行的解决办法：

方法一：注入全局消息转发脚本（推荐，适用于无法控制目标页面的情况） #

我们可以利用WebView的injectJavaScript属性，注入一段脚本重写全局的window.postMessage，让所有页面的消息都能被RN端捕获。还可以结合onNavigationStateChange，在每次页面跳转完成后重新注入脚本，确保新页面生效。

代码示例： #

import React, { useRef } from 'react';
import { WebView } from 'react-native-webview';

const MyWebView = () => {
  const webViewRef = useRef(null);

  // 要注入的消息转发脚本
  const injectPostMessageScript = `
    // 保存原始的postMessage方法
    const originalPostMessage = window.postMessage;
    window.postMessage = function(message, targetOrigin, transfer) {
      // 强制将目标源设为*，确保RN端能接收
      originalPostMessage(message, '*', transfer);
    };
    // 额外监听页面的message事件，覆盖用dispatchEvent发送消息的场景
    window.addEventListener('message', function(event) {
      window.postMessage(event.data, '*');
    });
    true; // 必须返回true，否则injectJavaScript可能不生效
  `;

  // 监听页面跳转完成，重新注入脚本
  const handleNavigationStateChange = (navState) => {
    if (navState.loading === false && webViewRef.current) {
      webViewRef.current.injectJavaScript(injectPostMessageScript);
    }
  };

  return (
    <WebView
      ref={webViewRef}
      source={{ uri: 'http://www.example-one.com' }}
      onMessage={(event) => console.log(event.nativeEvent.data)}
      onNavigationStateChange={handleNavigationStateChange}
      // 初始加载完成后注入一次脚本
      injectedJavaScript={injectPostMessageScript}
    />
  );
};

export default MyWebView;

这段脚本的作用：

• 重写window.postMessage，强制允许向任何源发送消息，绕过RN WebView的同源限制
• 监听页面的message事件，覆盖部分页面通过dispatchEvent发送消息的场景

方法二：修改目标页面的postMessage目标源（适用于能控制跳转后页面的情况） #

如果www.example-two.com是你自己维护的页面，可以直接修改它的postMessage代码，指定目标源为*（或RN WebView的实际源）：

window.postMessage('It works from example two!!', '*');

这种方法的局限性很明显——必须能修改目标页面的代码，第三方页面无法使用。

方法三：启用Android端的全局访问权限（谨慎使用） #

仅针对Android平台，可以通过配置allowUniversalAccessFromFileURLs来放宽WebView的跨域限制，但这个设置会降低WebView的安全性，不推荐在生产环境使用：

<WebView
  source={{ uri: 'http://www.example-one.com' }}
  onMessage={(event) => console.log(event.nativeEvent.data)}
  androidWebViewSettings={{
    allowUniversalAccessFromFileURLs: true,
  }}
/>

仅建议在测试环境或完全信任所有跳转页面的场景下使用。

总结下来，方法一的通用性和安全性最优，不管跳转至哪个页面都能稳定捕获消息，且无需修改目标页面代码。

内容的提问来源于stack exchange，提问作者Singh