React中Fetch请求在Firefox/Brave下不携带Cookie的问题

我正在用Google OAuth2.0实现认证，搭配passport和express-session处理登录会话。部署后遇到问题：Chrome、Edge浏览器一切正常，但Firefox和Brave中，Fetch请求无法携带Cookie——OAuth回调已经成功设置了Cookie（开发者工具可见），但请求头里就是没有Cookie信息。Firefox偶尔能正常工作，但清除Cookie后可能失效；Brave则完全无法正常工作。

我的服务端（App.js）和客户端代码如下：

服务端配置（App.js） #

//require setting
const app = express();

app.use(helmet());
app.use(express.json());
app.use(cors({
    origin: process.env.FRONTEND_URL,
    methods: "GET, POST, PUT, DELETE",
    credentials: true
}));

app.set('trust proxy', 1)
app.use(session({
    secret: process.env.COOKIE_SECRET,
    resave: false,
    saveUninitialized: false,
    cookie: { 
        secure: "auto",
        maxAge: 1000 * 60 * 60 * 2,
        sameSite: "none", //false in developement
    },
    store: pgStore, // this is working
}));

app.use(passport.initialize());
app.use(passport.session());

app.use("/v1", api);

客户端Fetch请求 #

async function httpGetUser() {
    return await fetch(`${REACT_APP_BASE_URL}/auth/login`, {
        credentials: "include",
        headers: {
          'Content-Type': 'application/json',
          'Access-Control-Allow-Credentials': true,
        }
      })
};

1. 修正secure Cookie属性的配置 #

secure: "auto"可能在反向代理环境下导致express误判请求协议，而SameSite=None必须搭配secure: true才能被Firefox、Brave这类严格遵循规范的浏览器接受。直接根据环境强制设置：

cookie: { 
    secure: process.env.NODE_ENV === 'production' ? true : false,
    maxAge: 1000 * 60 * 60 * 2,
    sameSite: process.env.NODE_ENV === 'production' ? "none" : "lax",
}

2. 移除客户端无效请求头 #

Access-Control-Allow-Credentials是服务端响应头，客户端发送这个头属于无效操作，会干扰浏览器凭证判断逻辑。修改客户端Fetch代码：

async function httpGetUser() {
    return await fetch(`${REACT_APP_BASE_URL}/auth/login`, {
        credentials: "include",
        headers: {
          'Content-Type': 'application/json',
        }
      })
};

3. 确保trust proxy配置正确 #

如果部署环境使用了反向代理（如Nginx、Cloudflare、Heroku路由），app.set('trust proxy', 1)可能不足以让express识别真实请求协议，改为信任所有代理：

app.set('trust proxy', true);

4. 检查浏览器隐私设置 #

• Firefox：进入about:preferences#privacy，确认“增强型跟踪保护”未拦截站点Cookie，可临时将站点加入例外列表测试。
• Brave：点击地址栏盾牌图标，检查是否开启了“阻止跨站跟踪”，若前后端为跨域域名，需将站点加入信任列表或关闭对应拦截规则。

5. 配置Cookie的domain属性（跨子域场景） #

如果前后端是不同子域（如app.example.com和api.example.com），需显式设置Cookie的根域名：

cookie: { 
    secure: true,
    maxAge: 1000 * 60 * 60 * 2,
    sameSite: "none",
    domain: ".example.com", // 前缀点适配所有子域
}

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