Expo中AuthSession与fetch之间的Cookie共享问题

我之前也踩过Expo AuthSession和fetch Cookie不共享的坑，这俩的Cookie存储其实是相互隔离的——AuthSession的WebView有自己独立的Cookie Jar，而Expo的fetch调用依赖的是原生系统的Cookie存储，所以哪怕是同源地址，fetch也拿不到WebView里设置的sessionid。给你几个实用的解决思路：

1. 手动提取并传递Cookie（最直接见效） #

认证完成后，从AuthSession的返回结果里把sessionid Cookie抠出来，之后的fetch请求手动带上这个Cookie头就行。

比如用AuthSession.startAsync的话，可以这么处理：

import * as AuthSession from 'expo-auth-session';

// 发起认证
const result = await AuthSession.startAsync({ authUrl: YOUR_LOGIN_PAGE_URL });

// 从响应头里提取Set-Cookie，解析出sessionid
const setCookieHeader = result.headers.get('Set-Cookie');
const sessionId = setCookieHeader?.split(';')[0]; // 假设sessionid是第一个键值对

// 后续fetch请求手动带上Cookie
return fetch(`${baseApiUrl}/${url}`, {
  method: 'POST',
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
    Cookie: sessionId // 比如 "sessionid=abc123"
  },
  body: JSON.stringify(body)
});

注意：如果Set-Cookie里有多个值，你可能需要用更严谨的方式解析出sessionid那一段。

2. 用expo-cookies统一管理Cookie池 #

Expo官方的expo-cookies库可以帮你打通WebView和原生请求的Cookie存储，安装后就能同步两者的Cookie：

首先安装依赖：

expo install expo-cookies

然后在认证完成后，把WebView的Cookie同步到全局存储：

import * as AuthSession from 'expo-auth-session';
import * as Cookies from 'expo-cookies';

// 认证完成后
await AuthSession.startAsync({ authUrl: YOUR_LOGIN_PAGE_URL });
// 获取目标域名下的所有Cookie
const authCookies = await Cookies.getAsync(baseApiUrl);

// 之后的fetch请求只要设置credentials: 'include'就能自动带上Cookie了
return fetch(`${baseApiUrl}/${url}`, {
  method: 'POST',
  credentials: 'include',
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(body)
});

这个方案的好处是不用手动处理Cookie，后续所有请求都能自动复用认证状态。

3. 调整你的fetch配置（排查基础问题） #

看你当前的fetch代码，有几个地方可以优化：

• 去掉手动设置的Origin头：同源请求下浏览器会自动添加，手动设置反而可能触发跨域检查
• 把credentials: 'same-origin'改成credentials: 'include'：虽然是同源，但include对后续可能的跨域场景更兼容，也能确保Cookie被携带
• 可以去掉mode: 'same-origin'：默认的cors模式在同源场景下会自动降级为same-origin，没必要手动指定

修改后的fetch代码大概是这样：

return fetch(`${baseApiUrl}/${url}`, {
  method: 'POST',
  credentials: 'include',
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(body)
});

4. 改用WebView组件自定义认证流程 #

如果AuthSession的隔离问题实在绕不开，你可以直接用react-native-webview实现登录流程，这样能更灵活地控制Cookie：

import { WebView } from 'react-native-webview';
import * as Cookies from 'expo-cookies';

// 在组件里渲染WebView
<WebView
  source={{ uri: YOUR_LOGIN_PAGE_URL }}
  onNavigationStateChange={(navState) => {
    // 监听登录成功后的跳转回调
    if (navState.url.includes(YOUR_SUCCESS_CALLBACK_PATH)) {
      // 提取当前WebView的Cookie
      Cookies.getAsync(baseApiUrl).then(cookies => {
        // 这里可以把Cookie存到状态管理里，供后续fetch使用
        console.log('获取到的登录Cookie:', cookies);
      });
    }
  }}
/>

这些方案里，我个人最推荐用expo-cookies的方式，既省心又能统一管理认证状态。

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