跨域SSR Nuxt应用中Directus SDK认证的Cookie异常问题求助

问题背景 #

构建SSR Nuxt应用，需通过Directus实现用户认证以访问特定内容，两者部署在不同域名下，出现Cookie相关异常。

当前配置 #

Directus 配置 #

CORS_ENABLED=true
ACCESS_CONTROL_ALLOW_CREDENTIALS=true
REFRESH_TOKEN_COOKIE_SECURE=true
REFRESH_TOKEN_COOKIE_SAME_SITE=lax
SESSION_COOKIE_SECURE=true
SESSION_COOKIE_SAME_SITE=none

Nuxt 代码实现 #

const directus = createDirectus(directusBaseUrl)
    .with(authentication('cookie', { credentials: 'include' }))
    .with(rest({ credentials: 'include' }));

async function userLogin() {
    try {
        const response = await directus.login(email, password);
        console.log(response)
    } catch (error) {
        console.error(error)
    }
}

async function userLogout() {
    try {
        await directus.logout();
    } catch (error) {
        console.error(error)
    }
}

异常现象 #

• Chrome浏览器：登录后创建两个Cookie，但页面刷新后Cookie被删除
• Firefox浏览器：即使配置允许Cookie，登录后也不会创建任何Cookie

解决方案 #

1. 统一SameSite与Secure配置 #

跨域场景下，Cookie的SameSite和Secure属性必须匹配浏览器要求：

• 生产HTTPS环境：将两个Cookie的SameSite统一设为none（跨域强制要求），保持Secure=true（SameSite=None必须配合Secure属性）：

REFRESH_TOKEN_COOKIE_SAME_SITE=none
SESSION_COOKIE_SAME_SITE=none

• 本地HTTP开发：临时将Secure设为false，SameSite改为lax（浏览器不允许HTTP环境下使用SameSite=None）：

REFRESH_TOKEN_COOKIE_SECURE=false
REFRESH_TOKEN_COOKIE_SAME_SITE=lax
SESSION_COOKIE_SECURE=false
SESSION_COOKIE_SAME_SITE=lax

2. 配置Cookie共享域名 #

若Nuxt与Directus属于同主域名的子域（如nuxt.yourdomain.com和directus.yourdomain.com），需指定Cookie的父域名以实现跨子域共享：

REFRESH_TOKEN_COOKIE_DOMAIN=.yourdomain.com
SESSION_COOKIE_DOMAIN=.yourdomain.com

注意：若为完全不同的顶级域名，浏览器第三方Cookie政策（如Firefox默认阻止）会限制Cookie存储，建议优先使用同主域部署。

3. Nuxt SSR环境下的Directus实例隔离 #

SSR模式下需避免全局Directus实例导致的上下文污染，通过Nuxt插件创建请求级实例：

// plugins/directus.ts
import { createDirectus, authentication, rest } from '@directus/sdk';

export default defineNuxtPlugin(() => {
  const directusBaseUrl = useRuntimeConfig().public.directusBaseUrl;
  const directus = createDirectus(directusBaseUrl)
    .with(authentication('cookie', { credentials: 'include' }))
    .with(rest({ credentials: 'include' }));

  return {
    provide: { directus }
  };
});

组件中通过useNuxtApp获取实例：

const { $directus } = useNuxtApp();

async function userLogin(email, password) {
  try {
    await $directus.login(email, password);
  } catch (error) {
    console.error(error);
  }
}

4. Firefox本地开发适配 #

Firefox默认阻止第三方Cookie，本地跨域调试需手动调整：

• 打开about:config，设置network.cookie.sameSite.laxByDefault为false
• 或在浏览器设置中临时允许当前站点的第三方Cookie

5. 验证Cookie属性 #

登录成功后，通过浏览器开发者工具（Application -> Cookies）检查Directus域名下的Cookie：

• 确认HttpOnly、Secure、SameSite、Domain属性与配置一致
• 若Cookie的Domain未覆盖Nuxt域名，会导致刷新后Cookie无法被识别

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