HTTPS客户端与HTTP后端Cookie无法发送问题求助

问题背景 #

原本基于HTTP搭建的前后端认证系统运行正常，为实现HLS视频播放，将客户端开发服务器改为HTTPS（地址：https://localhost:15173/login），后端仍使用HTTP（地址：http://localhost:3000）。现在后端无法生成Cookie并传递给客户端，此前HTTP客户端环境下该功能正常。

技术栈 #

• 服务器端：Node.js、Express.js
• 客户端：JavaScript、Vue3.js

核心疑问 #

是否必须将客户端和后端都改为HTTPS？

相关代码 #

后端生成Cookie的代码 #

res.cookie('JWTcookie', accessToken, { httpOnly: true})
res.status(200).json(responseJson)

后端验证Cookie的代码 #

app.get("/login", function (req, res) {
    var JWTcookie = req.cookies.JWTcookie;
    console.log("JWT cookie is here", req.cookies.JWTcookie);
    try {
        console.log("veryfy token is here", verifyToken(JWTcookie));
        const decoded = jwt.verify(JWTcookie, SECRET_KEY, function (err, decoded) {
            return decoded;
        })
        const responseJson = {
            success: true,
            username: decoded.name,
            userID: decoded.id
        }
        res.status(200).json(responseJson);
        // console.log("decoded token ", decoded);
    }
    catch (err) {
        const status = 401
        const message = 'Unauthorized'
        res.send("Not authorized. Better login");
        // res.status(status).json({ status, message })
    }
});

客户端发送Cookie的代码（Vue.js） #

onMounted(() => {
    const API_URL = "http://localhost:3000/";
    const authStore = userAuthStore();

    axios.get(API_URL + "login", { withCredentials: true }).then(res => {
        if (res.data.success == true) {
            const id = res.data.userID;
            const username = res.data.username;
            authStore.auth();
            authStore.setUser(id, username);
            console.log("mounted.")
            router.push("/video");
        }
        else {
            console.log("Response is here: ", res.data)
        }
    })

})

尝试过的操作 #

曾给Cookie添加secure: true属性，但问题未解决：

res.cookie('JWTcookie', accessToken, { httpOnly: true, secure: true})

原因分析与解决方案 #

1. 核心原因：浏览器混合内容安全策略
   当客户端运行在HTTPS环境时，浏览器会严格限制页面与HTTP后端的交互，这是为了避免"混合内容"带来的安全风险。HTTPS页面中的HTTP请求会被标记为不安全，浏览器会直接拦截Cookie的传递，即使客户端设置了withCredentials: true也无法生效。

2. secure属性的误区
   secure属性要求Cookie只能通过HTTPS协议传递，而你的后端是HTTP服务，设置该属性后，浏览器会直接拒绝保存这个Cookie，自然无法传递给后端，反而加剧了问题。

3. 解决方案

   • 必须将后端也改为HTTPS：这是规范且唯一适合生产环境的方案。开发环境可以生成自签名证书，配置Express启用HTTPS服务。
   • 开发环境临时妥协（仅测试用）：可以在浏览器中临时禁用混合内容拦截（比如Chrome中点击地址栏锁图标→网站设置→将"不安全内容"设为"允许"），但此方法仅适用于本地调试，绝对不能用于生产环境。

4. 补充配置（后端改HTTPS后）

   • 确保Cookie配置secure: true + sameSite: 'none'（因前后端端口不同，属于跨域场景）：

     res.cookie('JWTcookie', accessToken, { 
         httpOnly: true, 
         secure: true,
         sameSite: 'none'
     })
     

   • 后端配置CORS允许跨域携带凭证：

     const cors = require('cors');
     app.use(cors({
         origin: 'https://localhost:15173',
         credentials: true
     }));
     

   • 客户端保持withCredentials: true配置不变。

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