如何在React.js中获取Android原生WebView设置的Cookie

问题根因 #

读取失败通常由以下几个常见原因导致：

• Android WebView设置的Cookie带有HttpOnly属性：带有该标记的Cookie无法通过前端JS读取，只能在HTTP/HTTPS请求中被携带，所以PHP后端能读到但JS拿不到
• WebView未开启JavaScript和DOM存储权限
• Android 9+系统默认禁止第三方Cookie，未手动开启权限
• React端Cookie读取时机过早，页面还未完成初始化就发起读取操作

解决方案 #

第一步：修改Android端Cookie设置逻辑 #

设置Cookie时明确关闭HttpOnly标记，同时确保Cookie的Domain、Path属性和你React页面的部署域名路径完全匹配，示例配置：

CookieManager cookieManager = CookieManager.getInstance();
cookieManager.setAcceptCookie(true);
// 替换为你实际的React站点域名，Path填/代表全站生效，明确设置HttpOnly=false
cookieManager.setCookie("https://你的React站点域名", "test=cookie_value; Path=/; HttpOnly=false; SameSite=Lax");
// 强制刷新Cookie持久化，保证配置立即生效
cookieManager.flush();

第二步：确认WebView基础配置开启必要权限 #

WebSettings webSettings = webView.getSettings();
// 开启JS权限
webSettings.setJavaScriptEnabled(true);
// 开启DOM存储权限
webSettings.setDomStorageEnabled(true);
// 开启第三方Cookie权限（Android 9+默认关闭，必须手动配置）
CookieManager.getInstance().setAcceptThirdPartyCookies(webView, true);

第三步：调整React端Cookie读取逻辑 #

不要在useState初始化时直接读取，改为组件挂载完成后读取，也可以先通过原生document.cookie验证Cookie是否可被JS获取：

import Cookies from 'universal-cookie';
import { useEffect, useState } from 'react';

const DemoComponent = () => {
  const [cookie, setCookie] = useState(null);

  useEffect(() => {
    // 先打印原生cookie内容，排查是否是universal-cookie适配问题
    console.log('当前页面可读取的全部Cookie：', document.cookie);
    const cookies = new Cookies();
    setCookie(cookies.get('test'));
  }, []);

  return <div>test Cookie的值为：{cookie}</div>
}

快速验证方法 #

打开WebView的远程调试功能，在Chrome浏览器访问chrome://inspect连接对应WebView页面，直接在控制台输入document.cookie即可确认Cookie是否可被JS读取。

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