从节点后端发送的cookie，但未显示在应用程序选项卡上

Question

在 jwt 签名后，我将 cookie 作为响应从节点后端发送到我的前端。 在前端的网络选项卡中，set-cookie 是可见的并且已显示 cookie，但在应用程序选项卡中，未显示 cookie。 这是为什么？

发送cookie的后端函数代码：

import jwt from 'jsonwebtoken'

export const generateTokenAndSetCookie = (userId , res)=>{
    const token = jwt.sign({userId} , process.env.JWT_SECRET , {
        expiresIn : '15d', 
    } )
    res.cookie("jwt" , token , {
        httpOnly: false,
        secure: true,
        sameSite:'none'
    })
}

CORS 代码：

app.use(cors({credentials : true , origin : 'http://localhost:3000'}));

发送登录 POST 请求的前端代码：

const handleSubmit = async (e) => {
        e.preventDefault();
        // console.log(formData);
        if (!formData.password || !formData.username) {
            toast("Please Fill All the Fields !");
            return;
        }

        try {
            setLoading(true);
            const res = await fetch(`${PROXY_URL}/api/auth/login`, {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                },
                body: JSON.stringify(formData),
            });
    
            const data = await res.json();
            if (!res.ok){
                toast.error(data.error || "Failed to Login");
                setLoading(false);
                return;
            }
            setLoading(false);
            setIsError(false);
            // console.log(data);
            console.log(document.cookie);
            toast.success("User Logged In Successfully !");
            setFormData({
                username: "",
                password: "",
            })
        } catch (error) {
            setIsError(true);
            console.log(error);
        }
    };

网络选项卡图片：

应用程序选项卡同时图片：

该怎么办？

Answer 1

将

secure

设置为

false

，也许可以使用环境变量来区分开发环境和生产环境。

这是因为

secure

选项确保 cookie 仅通过地址中的“https://”指示的安全连接发送。在开发模式下，您的连接是不安全的，因为您是从“http://localhost”访问的。

import jwt from 'jsonwebtoken'

export const generateTokenAndSetCookie = (userId , res)=>{
    const token = jwt.sign({userId} , process.env.JWT_SECRET , {
        expiresIn : '15d', 
    } )
    res.cookie("jwt" , token , {
        httpOnly: false,
        secure: process.env.NODE_ENV === 'production',
        sameSite:'none'
    })
}