WebView应该使用与fetch相同的cookie

Question

我已经使用本机获取 API 登录了我的应用。我现在需要加载一个图像，所以我在<WebView>中加载它，但是网络视图没有使用来自网络视图之外的获取 API 的 cookie。是否可以告诉网络视图使用这些cookie？

Answer 1

您可以使用postMessage((将包含Cookie内容的消息发布到Webview。

您需要获取 Web 视图的引用，然后将消息发布到您的 Web 视图。

let webviewRef = null;
const cookiesContent = 'My cookies bla bla bla'
render() {
    return (
        <WebView
            onLoad={() => webviewRef.postMessage(cookiesContent)}
            ref={webview => { webviewRef = webview; }}
            source={{ uri: 'https://YourUrl' }}
        />
    );
}

然后在您的网站中，您可以创建 cookie 并使用它

<script>
    document.addEventListener("message", function(data) {
        document.cookie=`cookiesName=${data.data}`;
    });
</script>

如果您不是网站的所有者，您仍然可以尝试使用Webview Component的injectedJavaScript属性注入javascript。

const JsCode = 'document.addEventListener("message", function(data) {
        document.cookie=`cookiesName=${data.data}`;
    });';
  <WebView
        injectedJavaScript={JsCode}
        onLoad={() => webviewRef.postMessage(cookiesContent)}
        ref={webview => { webviewRef = webview; }}
        source={{ uri: 'https://YourUrl' }}
    />

Answer 2

您可以使用

https://github.com/react-native-community/cookies 获取cookie并将其重新设置