React Native WebView首次请求未携带Cookie问题问询

问题根源 #

首次加载WebView未携带手动设置的Cookie，核心原因是**sharedCookiesEnabled={true}与手动传入headers.Cookie的机制冲突**：

• 开启sharedCookiesEnabled后，WebView会优先使用系统共享的Cookie存储，而非source.headers中的Cookie
• 首次加载时，共享存储中还没有你要传递的Cookie，导致请求未携带预期内容

可行修复方案 #

方案1：关闭共享Cookie（仅需手动控制Cookie场景） #

如果不需要WebView和系统其他应用共享Cookie，直接移除sharedCookiesEnabled配置，让WebView优先读取headers中的Cookie：

const App = () => {
  return (
    <WebView
      source={{
        uri: 'http://example.com',
        headers: {
          Cookie: 'cookie1=asdf; cookie2=dfasdfdas',
        },
      }}
    />
  );
};

方案2：提前写入Cookie到共享存储（需共享Cookie场景） #

如果必须开启sharedCookiesEnabled，需要在WebView加载前，把Cookie写入WebView的共享存储，确保首次请求时Cookie已存在：

1. 安装Cookie管理依赖：

npm install @react-native-cookies/cookies --save

2. 修改代码实现：

import CookieManager from '@react-native-cookies/cookies';
import { WebView } from 'react-native-webview';
import { useEffect, useState } from 'react';

const App = () => {
  const [cookieReady, setCookieReady] = useState(false);

  useEffect(() => {
    const initCookies = async () => {
      // 逐个写入Cookie
      await CookieManager.set({
        name: 'cookie1',
        value: 'asdf',
        domain: 'example.com',
        path: '/',
      });
      await CookieManager.set({
        name: 'cookie2',
        value: 'dfasdfdas',
        domain: 'example.com',
        path: '/',
      });
      setCookieReady(true);
    };

    initCookies();
  }, []);

  // 等待Cookie写入完成再渲染WebView
  if (!cookieReady) return null;

  return (
    <WebView
      source={{ uri: 'http://example.com' }}
      sharedCookiesEnabled={true}
    />
  );
};

方案3：Android平台额外配置 #

Android上WebView的Cookie优先级更依赖系统存储，可添加thirdPartyCookiesEnabled配置确保Cookie生效：

<WebView
  source={{
    uri: 'http://example.com',
    headers: {
      Cookie: 'cookie1=asdf; cookie2=dfasdfdas',
    },
  }}
  sharedCookiesEnabled={true}
  thirdPartyCookiesEnabled={true}
/>

验证方法 #

• 用抓包工具查看首次请求的Request Headers，确认Cookie是否存在
• 在WebView的onLoad回调中注入JS代码console.log(document.cookie)，查看当前页面Cookie是否正确

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