使用Leptos框架时Cookie在WebKit中无法生效的问题排查

DevOps 小满

2026-6-20

WebKit环境下Leptos设置Cookie失效的原因及解决方法

核心原因：Secure属性的环境限制

WebKit（包括Safari）对Secure Cookie属性的校验比Chromium和Firefox更严格：

Chromium和Firefox在localhost等本地HTTP开发环境中，会放宽Secure属性的限制，允许设置这类Cookie；
但WebKit在非HTTPS环境下，会直接拒绝设置带有Secure属性的Cookie，哪怕是本地localhost环境。

你的代码中强制给所有Cookie添加了Secure属性，这就导致在WebKit的HTTP环境下设置Cookie直接失败。

额外问题：错误处理缺失

代码中使用unwrap_throw()会直接panic，无法暴露WebKit返回的具体错误信息，不利于排查问题。

解决方案

动态添加Secure属性
根据当前页面的协议（HTTP/HTTPS）决定是否添加Secure属性，开发环境下自动跳过：

use leptos::*;
use wasm_bindgen::JsCast;
use web_sys::console;

fn set_cookie(name: &str, value: &str) {
    let document = leptos::document()
        .dyn_into::<web_sys::HtmlDocument>()
        .unwrap_throw();
    
    // 检测当前是否为HTTPS环境
    let is_secure = match window().location().protocol() {
        Ok(protocol) => protocol == "https:",
        Err(_) => false,
    };

    // 构建Cookie属性列表
    let mut cookie_parts = vec![
        format!("{}={}", name, value),
        "SameSite=Lax".to_string(),
        "Path=/".to_string(),
        "Max-Age=31536000".to_string(),
    ];

    // 仅在HTTPS环境下添加Secure属性
    if is_secure {
        cookie_parts.push("Secure".to_string());
    }

    let cookie = cookie_parts.join("; ");

    // 捕获错误并输出到控制台，方便排查
    if let Err(e) = document.set_cookie(&cookie) {
        console::error_1(&e.into());
    }
}